/*///////////////



Bu stil dosyası nobelkitap.com firmasına özel yazılmış olup, ticari olarak lisanslıdır.



Author: Nobel Kitap

Versiyon: 2.0.0

Creator: muratcakar@nobelyayin.com

Date: 04.11.2024



//////////////*/



@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



body{

    font-family: 'Poppins', sans-serif;

}



.flashduyuru{

    height: 40px;

    width: 100%;

    padding: .5rem;

}



.ustkucuklink{

  font-size: 12px;

  color: black;

  text-decoration: none;

  cursor: pointer;

  margin-right: 2rem;

  margin-top: 1rem;

}



.ustkucuklink:hover{

 text-decoration: underline;

}



.ananavm:hover{

  background-color: #f89b9b44;

}



.cart-icon {

    font-size: 1.2rem;

    color: #333;

    position: relative;

  }

  .cart-count {

    background-color: #ff4141;

    color: white;

    font-size: 0.8rem;

    position: absolute;

    top: -5px;

    right: -10px;

    border-radius: 50%;

    padding: 2px 6px;

  }

  .divider {

    border-left: 1px solid #ddd;

    height: 30px;

    margin: 0 10px;

  }



  .nobelaltnav {

    width: 100%;

    justify-content: space-between;

  }

  

  .nobelaltnav {

    width: 100%;

  }



  @keyframes yanipSonme {

    0% {

      opacity: 1;

      color: red;

    }

    50% {

      opacity: 0.2;

      color: #000;

    }

    100% {

      opacity: 1;

    }

  }

  

  .kirmiziyan {

    animation: yanipSonme 1s infinite;

    color: #000;

  }



  .hbaslik {

    color: #000;

    text-transform: uppercase;

    font-weight: 800;

  }

  

  .hbaslik::before {

    content: "|";          

    color: red;

    font-size: 1.4em;       /* Yazıdan bir tık büyük */

    font-weight: 900;       /* Daha kalın */

    line-height: 0.8;       /* Dikey hizalama için */

    margin-right: 0.5em;    /* Başlık ile arasındaki boşluk */

  }



  .product-card {

    height: 100%;

    display: flex;

    flex-direction: column;

    transition: transform 0.3s ease;

  }

  

  .product-card:hover {

    transform: scale(1.05);

  }

  

  .product-img {

    position: relative;

    overflow: hidden;

    width: 100%;

    height: auto;

    border-radius: 5px;

  }

  

  .product-img .main-image {

    width: 100%;

    height: 300px;

    object-fit: center;

    transition: opacity 0.3s ease;

  }

  

  .overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: 2;

  }

  

  .product-card:hover .overlay {

    opacity: 1;

  }

  

  .overlay .btn {

    opacity: 1;

  }

  

  .discount-banner {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: black;

    padding: 1px 0;

    font-size: 0.7em;

    white-space: nowrap;

    overflow: hidden;

    display: flex; /* Flexbox kullanımı */

    align-items: center; /* Dikey ortalama */

    opacity: 90%;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

    transition: opacity 0.3s ease;

  }



  .discount-banner .marquee {

    overflow: hidden;

    position: relative;

    white-space: nowrap;

  }

  

  .discount-banner .marquee-inner {

    display: inline-block;

    animation: marquee 3s linear infinite;

  }

  

  .discount-banner .marquee-inner span {

    display: inline-block;

    margin-right: 1px; /* Yazılar arasındaki 1px boşluk */

  }

  

  @keyframes marquee {

    0% {

      transform: translateX(0);

    }

    100% {

      transform: translateX(-50%); /* Yüzde 50 kaydırarak tek bir yazı gibi görünmesini sağlıyoruz */

    }

  }

  

  .fixed-text {

    margin-right: 10px; /* Kayan yazı ile sabit yazı arasında boşluk */

    color: white;

  }

  

  .scrolling-text {

    display: inline-block;

    animation: scrollText 5s linear infinite;

    color: white;

  }

  

  .product-info {

    font-size: 0.9em;

    color: #333;

    flex-grow: 1;

  }

  

  /* Buton konumlandırma */

  .overlay .btn {

    margin: 0; /* Margin'i sıfırlayıp özel konumlandıracağız */

  }

  

  .overlay .btn:first-child {

    position: absolute;

    bottom: 10px; /* Sepete Ekle butonunu aşağıya yerleştir */

    left: 50%;

    transform: translateX(-50%);

  }

  

  .overlay .btn:last-child {

    position: absolute;

    top: 10px; /* Wishlist butonunu sağ üst köşeye yerleştir */

    right: 10px;

  }

  

  /* Kayan yazıyı gizlemek için */

  .product-card:hover .discount-banner {

    opacity: 0; /* Şeridi gizle */

  }

  

  .product-card:hover .scrolling-text {

    display: none; /* Kayan yazıyı gizle */

  }

  

  .sepetbuton{

    font-size: 13px;

    font-weight: 400;

  }

  

  .badge {

    position: absolute;

    font-size: 0.6em;

    z-index: 3;

}



.new-badge {

    top: 10px; /* Üstten mesafe */

    left: 10px; /* Soldan mesafe */

}



.oldprice{

  font-size: 12px;

  margin-right: .3rem;

}



.sepetbuton:hover{

  color: #fff;

  background-color: #ff4141;

}



.sepetmodaldialog {

  position: absolute;

  top: 2%; /* Üstten %2 boşluk */

  right: 1%; /* Sağa %1 boşluk */

  height: calc(100% - 4%); /* Yükseklik %100 - 2% üstten ve 2% alttan */

  margin: 0; /* Varsayılan margin'i sıfırla */

}



.sepetmodelcontent {

  border-radius: 20px; /* Kenar yuvarlama */

  height: 100%; /* İçerik yüksekliğini %100 yap */

  width: 100%;

}



.puansepetdiv {

  background-color: #5e75f8;

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  justify-content: center;

  position: relative; /* Pozisyonu ayarlamak için */

}



.kargoucretsizdiv {

  background-color: #f85e78;

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

}


.kampanyacokludiv {

  background-color: #5e5f63;

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

}

.kampanyacokludivyasam {

  background-color: #2cca6d;

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

}

.coklukampanya-yazi {
  color: #fff;
  font-weight: bold;
  animation: sallanma 0.8s ease-in-out infinite alternate;
  display: inline-block;
}

/* Kampanya kelimesi için kırmızı arka plan */
.coklukampanya-yazi span {
  background-color: #ff0000;
  padding: 2px 5px;
  border-radius: 3px;
}

/* Sağa sola sallanma animasyonu */
@keyframes sallanma {
  0% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(3px);
  }
}

.anlasmali-kargou {
  background-color: transparent;
  border: 1px solid #b9b8b8;
  padding: 20px;
  margin: 25px 0;
  position: relative;
  margin-right: 1rem;
}

.anlasmali-kargou-icerik {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}

.kargo-logou {
  height: 25px;
  object-fit: contain;
  padding: 1px;
  transition: transform 0.3s ease;
}

.kargo-logou:hover {
  transform: scale(1.1);
}

/* Ekstra Responsive Davranış */
@media (max-width: 768px) {
  .kargo-logou {
    max-width: 80px;
    height: 50px;
  }
  
  .anlasmali-kargou {
    padding: 15px;
  }
}


.taksitboldiv {

  background-color: #252525;

  border-radius: 10px;

  padding: 10px;

  color: #fff;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

}



.kargosepetdiv {

  background-color: #f8c75e;

  border-radius: 10px;

  padding: 10px;

  color: #000;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

}



.ognpdiv {

  background-color: #f8c75e;

  border-radius: 10px;

  padding: 15px;

  color: #000;

  overflow: hidden; /* Taşmayı önlemek için */

}



.ogndrdiv {

  padding: 10px;

}



.ognpdivda {

  background-color: #5e75f8;

  border-radius: 10px;

  padding: 15px;

  color: #fff;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

  text-align: center;

}



.ogndrdivdara {

  padding: 10px;

}



.ogfiyat {

  font-weight: 400; 

  font-size: 14px;

}



.ogfiyatkalin {

  font-weight: 800; 

  font-size: 15px;

}



.icon {

  position: absolute; /* İkonun pozisyonunu ayarlamak için */

  bottom: -13%; /* Alt tarafta görünmesi için */

  left: -9%; /* Sol tarafta görünmesi için */

  font-size: 8rem; /* İkon boyutunu ayarlayın */

  opacity: 0.3; /* Opasite ayarı */

  pointer-events: none; /* İkon tıklanamaz olsun */

  z-index: 0; /* Divin altına koymak için */

}



.iconright {

  position: absolute; /* İkonun pozisyonunu ayarlamak için */

  bottom: -13%; /* Alt tarafta görünmesi için */

  right: -9%; /* Sol tarafta görünmesi için */

  font-size: 8rem; /* İkon boyutunu ayarlayın */

  opacity: 0.3; /* Opasite ayarı */

  pointer-events: none; /* İkon tıklanamaz olsun */

  z-index: 0; /* Divin altına koymak için */

}



.sepet-item {

  display: flex;

  padding: 15px;

  border: 1px solid #ddd;

  border-radius: 10px;

  background-color: #f9f9f9;

  align-items: center;

  justify-content: space-between;

}



.product-image {

  height: 100px;

  width: 100px;

  object-fit: cover;

  border-radius: 10px;

  margin-right: 10px;

}



.product-details {

  display: flex;

  flex: 1;

  justify-content: space-between;

}



.product-info {

  flex-grow: 1;

  text-align: left;

}



.price {

  font-weight: bold;

  color: #333;

}



.remove-price-quantity {

  text-align: right;

}



.quantity-control {

  display: flex;

  align-items: center;

  gap: 5px; /* Butonlar ve input arasındaki boşluğu azaltmak için */

  margin-top: 5px;

}



.quantity-control button {

  width: 25px; 

  height: 25px;

  padding: 0; 

  font-size: 0.8rem; 

}



.quantity-input {

  width: 35px; 

  padding: 2px; 

  text-align: center;

  font-size: 0.8rem; 

  margin: 0 1px;

}



.remove-link {

  color: #ff0000;

  text-decoration: none;

  font-size: 0.9rem;

  margin-top: 1px;

  text-decoration: underline;

}



.kaydirsepet {

  max-height: 550px;

  overflow-y: auto;

}



.modal-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px;

}



.totals p,

.totals h6 {

  margin: 0;

  padding: 0 5px;

}



.totals h6 {

  margin-top: 5px;

  font-weight: bold;

  font-size: 1rem;

  padding: 10px 0;

}



.action-buttons .btn {

  width: 100px; /* Butonların aynı boyutta görünmesi için */

}



.progress-wrapper {

  position: relative; 

  width: 100%; 

}



.progress-bar {

  z-index: 1; 

}



.progress-icon-container {

  position: absolute;

  top: -5px; 

  right: 8px; 

  transform: translate(50%, 0); 

  z-index: 2; 

}



.progress-icon {

  width: 24px; 

}



.arananlink{

  font-size: 12px;

  background-color: #ffdb78;

  padding: 5px;

  color: #000;

  text-decoration: none;

}



.arananlink:hover{

  text-decoration: underline;

}



.aramabaslik{

  font-size: 12px;

}



.aramayazi{

  font-size: 12px;

}



.searchdiv {

  max-height: 250px;

  overflow-y: auto;

  background-color: #ffcbcb5b;

  padding: 5px;

}



.searchlink{

  font-size: 12px;

  text-decoration: none;

  color: #ff0000;

}



.searchlink:hover{

  text-decoration: underline;

}



.input-group-text {

  background-color: #e94242; /* İkon arka plan rengi */

  color: #fff; /* İkon rengi */

  border: none; /* Kenarları kaldır */

  border-radius: 0.5rem 0 0 0.5rem; /* Kenar yuvarlama */

}



.form-control {

  border-radius: 0 0.5rem 0.5rem 0; /* Kenar yuvarlama */

  border: 1px solid #f85e5e41; /* Kenar rengi */

}



.form-control:focus {

  box-shadow: none; /* Focus olduğunda gölgeyi kaldır */

  border: 1px solid #f70000; /* Kenar rengi */

}



.input-group {

  width: 100%; /* İsteğe bağlı genişlik ayarı */

}



.unuttumlink{

  color: #f70000;

  text-decoration: none;

  font-size: 12px;

}



.unuttumlink:hover{

  text-decoration: underline;

}



.girisinputposta{

  height: 60px;

  padding: 10px; 

}



.girisinputpass{

  height: 60px;

  padding: 10px;

}



.yazikucult {

  font-size: 12px;

}



.girisnavbuton:hover{

  color: #f70000;

} 



.sozlesmelink{

  color: #f70000;

  text-decoration: none;

  font-weight: 600;

}



.sozlesmelink:hover{

  text-decoration: underline;

}



.kisiselverilink{

  font-size: 12px;

}



.nav-tabs {

  border-bottom: none; /* Sekmelerin altındaki kenarlıkları kaldır */

}



.nav-tabs .nav-item {

margin-right: 2rem;

margin-bottom: 1rem;

}



.nav-tabs .nav-link {

  border: none; /* Kenarlıkları kaldır */

  text-align: center; /* Metni ortala */

  padding: 10px 0; /* Dikey boşluk */

  color: #333; /* Metin rengi */

  position: relative; /* Çizgi konumu için */

  opacity: 0.4; /* Seçili olmayan sekmeler için opaklık */

  transition: opacity 0.3s; /* Geçiş efekti */

}



.nav-tabs .nav-link.active {

  color: #333; /* Aktif sekme metni rengi */

  opacity: 1; /* Aktif sekme için opaklığı artır */

}



/* Aktif sekmenin altında alt çizgi */

.nav-tabs .nav-link.active::after {

  content: ''; /* İçerik yok */

  position: absolute; /* Konumlandırma */

  left: 50%; /* Ortaya yerleştir */

  bottom: -2px; /* Aşağıya kaydır */

  height: 3px; /* Çizginin kalınlığı */

  width: 150%; /* Çizginin genişliği */

  background-color: orange; /* Çizgi rengi turuncu */

  transform: translateX(-50%); /* Ortalayarak kaydır */

}



/* Aktif olmayan sekme için çizgi yok */

.nav-tabs .nav-link::after {

  content: none; /* İçerik yok */

}



/* Üzerine gelindiğinde opaklık artışı */

.nav-tabs .nav-link:hover {

  opacity: 0.8; /* Üzerine gelindiğinde opaklığı artır */

}



.input-container {

  position: relative;

  width: 100%;

}



.country-code {

  position: absolute;

  top: 42%;

  left: 10px;

  transform: translateY(-50%);

  font-size: 1rem;

  color: #333;

  pointer-events: none;

}



.girisinputtelefon {

  height: 60px;

  padding: 10px 10px 10px 80px; /* Bayrak ve +90 kodu için boşluk ayarı */

  font-size: 1rem;

}



.country-codekur {

  position: absolute;

  top: 40%;

  left: 10px;

  transform: translateY(-50%);

  font-size: 12px;

  color: #333;

  pointer-events: none;

}



.girisinputtelefonkur {

  height: 60px;

  padding: 10px 1px 10px 70px; /* Bayrak ve +90 kodu için boşluk ayarı */

  font-size: 12px;

}



.footergiris {

  position: fixed;

  bottom: 10px;

  left: 0;

  width: 100%;

  padding: 10px 0;

  z-index: 10;

}



.girisinputpasskayit {

  padding-right: 40px; /* Göz ikonuna yer açmak için sağ padding ekledik */

}



.toggle-password {

  position: absolute;

  top: 40%;

  right: 10px;

  transform: translateY(-50%);

  cursor: pointer;

  color: #888;

}



.ustkatelink{

  text-decoration: none;

  color: #000;

  font-size: 13px;

}



.ustkatelink:hover{

  text-decoration: underline;

}



.ubaslik {

  color: #000;

  text-transform: uppercase;

  font-weight: 800;

}



.odeyenlinkurun{

  font-weight: 800;

  text-decoration: none;

  color: #fff;

}



.odeyenlinkurun:hover{

  text-decoration: underline;

}



.product-info {

  display: flex;

  flex-direction: column; /* Öğeleri dikey olarak hizalamak için */

  align-items: center; /* Ortalamak için */

  font-family: 'Poppins', sans-serif;

  color: #333;

  text-align: center; /* Metinleri ortalamak için */

}



.publisher-logo {

  height: 20px;

  object-fit: cover;

}



.publisher-details {

  display: flex;

  flex-direction: column; /* Yine dikey hizalama */

  align-items: center; /* Metinleri ve fiyatları ortalar */

  gap: 5px; /* Metinler ve fiyatlar arasındaki boşluğu ayarlar */

}



.publisher-name {

  font-weight: 600;

  font-size: 12px;

  text-decoration: none;

  color: #333;

}



.publisher-name:hover {

  text-decoration: underline;

}





.price-infour {

  display: flex;

  align-items: center;

  gap: 4px; /* Fiyatlar ve indirim etiketi arasındaki mesafe */

}



.oldpriceur {

  text-decoration: line-through;

  color: #888;

  font-size: 0.8rem;

}



.newpriceur {

  font-weight: bold;

  color: #000;

  font-size: 1.3rem;

}



.discount-badge {

  background-color: #d9534f;

  color: white;

  padding: 0.2rem 0.5rem;

  border-radius: 20px;

  font-size: 0.68rem;

  margin-right: .3rem;

}



.sepetekleme-container {

  display: flex;

  align-items: center;

  gap: 15px;

}



.quantity-controlsur {

  display: flex;

  position: relative;

  align-items: center;

}



.qty-inputur {

  width: 50px;
  height: 50px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 500;
  margin-right: .3rem;
}

@media screen and (max-width: 768px) {
  .qty-inputur {
    width: 50px;
    height: 50px;
    font-size: 16px;
    border-radius: 8px;
    padding: 5px;
    font-weight: 500;
    margin-right: 1rem;
  }
}

/* Small mobile style - will apply when screen width is 480px or smaller */
@media screen and (max-width: 480px) {
  .qty-inputur {
    width: 50px;
    height: 50px;
    font-size: 16px;
    border-radius: 8px;
    padding: 5px;
    font-weight: 500;
    margin-right: 1rem;
  }
}



.qty-btnur {

  width: 35px;

  height: 30px;

  font-size: 18px;

  background-color: #dc3545;

  color: white;

  border: none;

  cursor: pointer;

  position: absolute;

  display: flex;

  justify-content: center;

  align-items: center;

}



.qty-btnur:focus {

  outline: none;

}



.minusur {

  bottom: 0; /* - butonu, input'un sağ üst köşesinde olacak şekilde hizalandı */

  right: -10px; 

}



.plusur {

  top: 0; /* + butonu, input'un sağ alt köşesinde olacak şekilde hizalandı */

  right: -10px;

}



.yok-button {

	position: relative;

	padding: 10px;

	border: 0;

	border-radius: 10px;

	outline: none;

	cursor: pointer;

	color: #fff;

	transition: .3s ease-in-out;

	overflow: hidden;

	height: 70px; 

	font-size: 14px; 

	font-weight: 300;

	background-color: #000000; /* Başlangıç kırmızı */

}



.yok-button:hover {

	background-color: #222222;

}



.cart-button {

	position: relative;

	padding: 10px;

	border: 0;

	border-radius: 10px;

	outline: none;

	cursor: pointer;

	color: #fff;

	transition: .3s ease-in-out;

	overflow: hidden;

	height: 70px; 

	font-size: 14px; 

	font-weight: 300;

	background-color: #dc3545; /* Başlangıç kırmızı */

}



.cart-button:hover {

	background-color: #811f1c;

}



.cart-button:active {

	transform: scale(.9);

}



.cart-button.clicked {

	background-color: #000; /* Eklendi yazısı geldiğinde yeşil arkaplan */

}



.cart-button .fa-shopping-cart, .cart-button .fa-box {

	position: absolute;

	top: 50%;

	transform: translate(-50%,-50%);

}



.cart-button .fa-shopping-cart {

	left: -10%;

	z-index: 2;

	font-size: 2em;

}



.cart-button .fa-box {

	top: -20%;

	left: 52%;

	z-index: 3;

	font-size: 1.2em;

}



.cart-button span {

	position: absolute;

	left: 50%;

	top: 50%;

	font-size: 1.2em;

	color: #fff;

	transform: translate(-50%, -50%);

}



.cart-button span.add-to-cart {

	opacity: 1;

	font-size: 14px;

	font-weight: 300;

}



.cart-button span.added {

	opacity: 0;

	font-size: 14px;

	font-weight: 300;

}



.cart-button.clicked .fa-shopping-cart {

	animation: cart 1.5s ease-in-out forwards;

}



.cart-button.clicked .fa-box {

	animation: box 1.5s ease-in-out forwards;

}



.cart-button.clicked span.add-to-cart {

	animation: txt1 1.5s ease-in-out forwards;

}



.cart-button.clicked span.added {

	animation: txt2 1.5s ease-in-out forwards;

}



@keyframes cart {

	0% {

		left: -10%;

	}

	40%, 60% {

		left: 50%;

	}

	100% {

		left: 110%;

	}

}



@keyframes box {

	0%, 40% {

		top: -20%;

	}

	60% {

		top: 40%;

		left: 52%;

	}

	100% {

		top: 40%;

		left: 112%;

	}

}



@keyframes txt1 {

	0% {

		opacity: 1;

	}

	20%, 100% {

		opacity: 0;

	}

}



@keyframes txt2 {

	0%, 80% {

		opacity: 0;

	}

	100% {

		opacity: 1;

	}

}



.product-infour {

  display: flex;

  align-items: center;

}



.kitaphktitle {

font-weight: 300;

text-decoration: underline;

text-decoration-color: orange;

margin-bottom: 1rem;

}

.kargohktitle {

  font-weight: 300;
  
  text-decoration: underline;
  
  text-decoration-color: #1ac26e;;
  
  margin-bottom: 1rem;
  
}



.hkdiv{

border: 1px solid #b9b8b8;

padding: 25px 25px 25px;

margin-right: 1rem;

}



.yorumsoldiv{

  border-radius: 10px;

  padding: 10px;

  color: #000;

  position: relative; /* Pozisyonu ayarlamak için */

  overflow: hidden; /* Taşmayı önlemek için */

  border: 1px solid #ababab;

}



.tamyildiz{

  color: #ffcb3b;

}



.comment-container {

  display: flex;

  align-items: flex-start;

  border: 1px solid #e0e0e0;

  border-radius: 8px;

  padding: 1rem;

  margin-bottom: .3rem;

  background-color: #f9f9f95b;

  max-width: 600px;

  padding: 20px;

}



.comment-initials {

  width: 80px;

  height: 60px;

  border-radius: 50%;

  background-color: #ffaf47; /* Kullanıcı baş harfi için renk */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  font-size: .8rem;

  margin-right: 1rem;

}



.comment-body {

  display: flex;

  flex-direction: column;

  width: 100%;

}



.comment-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 0.5rem;

}



.comment-text {

  font-size: 0.8rem;

  color: #333;

  font-weight: 300;

}



.altmenu {

  background-color: #f7f7f7; /* Siyah arka plan */

  color: #000; /* Beyaz yazı rengi */

  padding: 2rem 1rem;

}



.altmenu h5 {

  color: #f1310f; /* Başlıklar için altın sarısı ton */

  border-bottom: 2px solid #f10f0f;

  padding-bottom: 0.5rem;

  display: inline-block;

  font-size: 1.2rem;

}



.altmenu a {

  color: #000;

  font-size: 0.9rem;

  text-decoration: none;

}



.altmenu a:hover {

  color: #f10f0f; /* Link üzerine gelince sarı renkte belirginleşsin */

  text-decoration: underline;

}



.altmenu button {

  margin-top: 0.5rem;

  background-color: #e74c3c;

  color: #fff;

  border: none;

}



.altmenu button:hover {

  background-color: #c0392b;

}



.altmenu hr {

  border-top: 1px solid #555;

}



.altmenu small.text-success {

  color: #2ecc71; /* Yeşil renkte güvenli alışveriş simgesi */

}



.altmenu small {

  color: #000;

}



.altmenu .col-lg-3:last-child {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}





.altmenu .bulten {

  flex: 1;

  background-color: #222;

  border: 1px solid #555;

  color: #fff;

  padding: 0.4rem 0.8rem;

  font-size: 0.9rem;

  border-radius: 4px;

  height: 35px;

  margin-top: auto;

}



.altmenu .bulten::placeholder {

  color: #bbb;

}



.taksittable th{

  font-size: 12px;

}



.taksittable td{

  font-size: 12px;

}



.yorummodalbaslik{

  font-weight: 300;

  text-decoration: underline;

  text-decoration-color: orange;

}



.profilsol {

  background-color: #f5f5f5; /* Hafif gri arka plan */

  padding: 1.5rem;

  border-radius: 8px; /* Köşeleri yuvarlama */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge */

}



.profilsol h6 {

  font-weight: 600;

  color: #333;

}



.profilsol h6 small {

  display: block;

  font-weight: 300;

  font-size: 0.8rem;

  color: #666;

}



.profilsol hr {

  border-top: 1px solid #8d8d8d;

  margin: 1rem 0;

}



.profilsol a {

  display: block;

  color: #000000;

  text-decoration: none;

  font-size: 0.8rem;

  transition: color 0.3s ease, transform 0.3s ease; /* Renk ve hafif animasyon */

}



.profilsol a:hover {

  color: #b30018;

  transform: translateX(5px); /* Linkin biraz sağa kayarak vurgulanması */

}



.profilsol a:focus,

.profilsol a:active {

  color: #b30018; /* Seçili olduğunda renk değişimi */

  transform: translateX(5px); /* Aynı şekilde kayma */

  font-weight: bold; /* Seçili durumu vurgulamak için font-weight ekleyebiliriz */

}



.profilsol a:last-child {

  color: #e74c3c;

  font-weight: bold;

}



.profilsol a:last-child:hover {

  color: #c0392b;

  transform: translateX(5px);

}



.profilortadiv {

  box-shadow: 0 2px 2px 0 rgba(28, 36, 51, .102);

  border: 1px solid #7a7a7a38;

  padding: 1rem 30px;

  border-radius: 5px;

  margin-right: .1rem;

  display: flex;

  align-items: center;

  flex-wrap: nowrap; 

}



.boxza {

  display: flex;

  align-items: center;

  justify-content: space-between;  /* Sol ve sağda öğeleri hizalar */

  flex-grow: 1; /* Kutu genişlesin, ancak alt satıra kaymasın */

}



.left-content {

  text-align: left;  /* Yazıyı sola hizalar */

  margin-right: 1rem;

}



.left-content small {

  font-size: 0.875rem;

}



.left-content h5 {

  font-size: 1.5rem;

  font-weight: bold;

  margin: 0;

}



.boxza i {

  color: #888;

  font-size: 2rem;

}



.aktifsipo {

  text-decoration: underline;

  text-decoration-color: #2ecc71;

  font-weight: 300;

}



.order-box {

  display: flex;

  align-items: center;

  border: 2px solid green;

  padding: 15px;

  border-radius: 10px;

  margin: 15px 0;

  gap: 1rem;

  position: relative;

  overflow: hidden;

  transition: transform 0.2s ease; /* Yakınlaştırma animasyonu */

}



.order-box:hover {

  transform: scale(1.03);

}



.order-box-link {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1; /* İçerik altında olacak şekilde */

  cursor: pointer;

  display: block;

}



.order-info,

.order-shipping,

.order-items,

.order-status {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center; /* İçeriği dikey ortalar */

  text-align: center;

}



.order-info p,

.order-price {

  margin: 0;

  font-size: 0.9rem;

}



.order-shipping img {

  margin: auto; /* Resmi ortalar */

}



.product-images {

  display: flex;

  align-items: center;

  gap: 5px;

}



.product-images img {

  width: 45px;

  height: 45px;

  border-radius: 50%;

  border: 2px solid white;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

}



.product-images img:not(:first-child) {

  margin-left: -20px;

}



.more-items {

  font-size: 0.75rem;

  font-weight: bold;

  color: #888;

  margin-left: 3px;

  align-self: center;

}



.order-price {

  font-weight: bold;

  color: #333;

  margin-top: 10px;

}



.order-status {

  display: flex;

  flex-direction: column;

  align-items: center; /* İçeriği dikey ortalar */

}



.order-status a {

  text-decoration: none;

  color: green;

  font-weight: bold;

  font-size: 0.7rem;

  margin-bottom: 5px;

}



.badge {

  font-size: 0.75rem;

  padding: 5px 10px;

}



.siparisdetay {

  border: 1px solid #92929286;

  border-radius: 10px;

  padding: 1rem;

}



.detaybaslikfatura {

  text-decoration: underline;

  text-decoration-color: #5e75f8;

  font-weight: 300;

}



.detaybaslikodeme {

  text-decoration: underline;

  text-decoration-color: #f85e5e;

  font-weight: 300;

}



.urunsipdetay {

  border: 1px solid #63636381;

  padding: 10px;

}



.durumsipdetay {

  color: #8b8b8b;

}



.siptakiplink {

  font-size: 12px;

  color: #000;

  text-decoration: none;

}

.siptakiplinksusu {

  font-size: 12px;

  color: #000;

  text-decoration: none;

}



.siptakiplink:hover {

  text-decoration: underline;

}



.formlabelkisisel {

  color: #000;

  font-size: 12px;

  font-weight: 600;

  margin-bottom: .5rem;

}



.kaydiricon{

  margin-right: .5rem;

}



.kisiselupbuton {

  font-size: 14px;

  font-weight: 300;

  height: 60px;

}



.kisiselinput {

  height: 45px;

  font-size: 12px;

  border: 1px solid #57575791;

}



.kayitliadresdiv {

  font-weight: 300;

  font-size: 13px;

  border: 1px solid #aaaaaa81;

  text-align: center;

  padding: .5rem;

}



.uyeliktipiadres {

  font-weight: 800;

}



.adresbuton {

  font-size: 12px;

}



.kisiseltextarea {

  height: 100px;

  font-size: 12px;  

  border: 1px solid #57575791;

}



.incelemedestek {

  font-size: 12px;

  background-color: #4e4e4ee8;  

  color: #fff;

  padding: 6px;

  border-radius: 5px;

}



.cevaplandidestek {

  font-size: 12px;

  background-color: #44a84de8;  

  color: #fff;

  padding: 6px;

  border-radius: 5px;

}



.kapandidestek {

  font-size: 12px;

  background-color: #000000e8;  

  color: #fff;

  padding: 6px;

  border-radius: 5px;

}



.destektable {

  font-size: 12px;

}



.destekgorlink {

  font-size: 12px;

  color: #f85e5e;

  text-decoration: none;

}



.destekgorlink:hover {

  text-decoration: underline;

}



.destektitle {

  font-weight: 300;

  text-decoration: underline;

  text-decoration-color: orange;

}



.benimmesajdivim {

  font-size: 14px;

  font-weight: 300;

  background-color: #2ecc71;

  color: white;

  padding: 10px;

  border-bottom-right-radius: 10px;

  margin-bottom: .5rem;

  margin-top: .5rem;

  width: 50%;

  max-width: 350px;

  float: left;

}



.supportmesajdivim {

  font-size: 14px;

  font-weight: 300;

  background-color: #000000;

  color: white;

  padding: 10px;

  border-bottom-left-radius: 10px;

  margin-bottom: .5rem;

  margin-top: .5rem;

  width: 60%;

  max-width: 400px;

  float: right;

}



.edit-button {

  position: absolute;

  top: 0;

  right: 0;

  transform: translate(50%, 50%);

  background-color: #0a2441;

  color: white;

  border: none;

  border-radius: 10%;

  width: 20px;

  height: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  cursor: pointer;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);

}



.edit-button:hover {

  background-color: #0056b3;

}



.avatar-option {

  display: inline-block;

  position: relative;

}



.avatar-radio {

  display: none; /* Radio input gizleniyor */

}



.avatar-label img {

  cursor: pointer;

  transition: border 0.3s ease;

}



.avatar-radio:checked + .avatar-label img {

  border: 3px solid #007bff; /* Mavi çerçeve */

  border-radius: 20%;

}



.avatarbutondegis {

  font-size: 12px;

  font-weight: 300;

  height: 40px;

}



.avatarresim {

  border-radius: 20%;

  width: 80px; 

  height: 80px; 

  object-fit: cover;

}



.sepetindexbuton {

  visibility: hidden;

  position: absolute;

  top: 57%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



/* Show buttons on hover */

.product-card:hover .sepetindexbuton {

  visibility: visible;

}



/* Button styling */

.sepetindexbuton .btn {

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  transition: all 0.3s ease;

}



/* Add hover effect to buttons */

.sepetindexbuton .btn:hover {

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}



/* Specific styling for "Sepete Ekle" button */

.sepetindexbuton .sepetbuton {

  width: 100px;

  height: 35px;

  font-size: 12px;

  font-weight: 400;

  transition: all 0.3s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Heart button styling */

.sepetindexbuton .btn-outline-light {

  width: 35px;

  height: 35px;

  display: flex;

  align-items: center;

  justify-content: center;

}





.yazarlink {

  color: #000;

  text-decoration: none;

}



.yazarlink:hover {

  text-decoration: underline;

}



/* Next ve Previous butonlarının sadece hover durumunda görünmesi */

#carouselExampleFade .carousel-control-prev, 

#carouselExampleFade .carousel-control-next {

  opacity: 0;

  transition: opacity 0.3s;

}

#carouselExampleFade:hover .carousel-control-prev, 

#carouselExampleFade:hover .carousel-control-next {

  opacity: 1;

}



/* Next ve Previous butonlarının stilini düzenleme */

.carousel-control-next, .carousel-control-prev {

  width: 40px;

  height: 40px;

  top: 50%;

  transform: translateY(-50%);

}

.carousel-control-next {

  right: 20px;

}

.carousel-control-prev {

  left: 20px;

}

.carousel-control-next-icon, .carousel-control-prev-icon {

  width: 20px;

  height: 20px;

  background-color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.carousel-control-next-icon::after, .carousel-control-prev-icon::after {

  content: '';

  display: inline-block;

  width: 6px; /* Daha küçük ikon için boyut */

  height: 6px;

  border: solid 2px black;

  border-width: 2px 2px 0 0;

}

.carousel-control-next-icon::after {

  transform: rotate(45deg);

}

.carousel-control-prev-icon::after {

  transform: rotate(-135deg);

}



/* Indicator çizgisi stili */

.carousel-indicators-line {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 10px;

}

.carousel-indicators-line span {

  width: 20px; /* Daha kısa gösterim için */

  height: 6px;

  background-color: grey;

  transition: background-color 0.3s;

  cursor: pointer;

  border-radius: 20px;

}

.carousel-indicators-line .active {

  background-color: red;

}



.dilbuton .btn {

  background-color: transparent;

  border: none;

  padding: 0;

  margin: 0;

  margin-left: 1rem;

}



.dilbuton .btn img {

  width: 35px;

  height: 35px;

  transition: transform 0.3s ease;

}



.dilbuton .btn:hover img {

  transform: scale(1.1);

}



.dilbuton .dropdown-menu {

  padding: 0;

  margin: 0;

  border: none;

  box-shadow: none;

  width: auto;

  min-width: 0;

  transform: translateY(10px); /* Menü 10px aşağıda açılsın */

}



.dilbuton .dropdown-item {

  padding: 0;

  margin: 0;

  width: 35px;

  height: 35px;

}



.dilbuton .dropdown-item img {

  width: 100%;

  height: 100%;

  transition: transform 0.3s ease;

}



.dilbuton .dropdown-item:hover img {

  transform: scale(1.1);

}



/* Genel Stil */

.filter-box h6 {

  font-size: 16px;

  font-weight: bold;

  color: #333;

  margin-bottom: 12px;

  border-bottom: 1px solid #ddd;

  padding-bottom: 5px;

  text-align: left; /* Başlıkları sola hizala */

}



.filter-box input[type="text"] {

  font-size: 12px;

  color: #555;

  border-radius: 8px;

  border: 1px solid #ddd;

  padding: 8px;

  margin-bottom: 10px;

}



/* Checkbox Grubu */

.checkbox-group {

  max-height: 200px; /* Kaydırma yüksekliği */

  overflow-y: auto; /* Kaydırma */

  padding-right: 5px;

}



/* Checkbox Stili */

.checkbox-group .form-check {

  display: flex;

  align-items: center;

  margin-bottom: 8px;

  margin-left: .3rem;

}



.checkbox-group .form-check-input {

  width: 18px;

  height: 18px;

  margin-right: 8px;

  appearance: none;

  border: 2px solid #333;

  border-radius: 4px;

  outline: none;

  cursor: pointer;

  transition: background-color 0.2s ease, border-color 0.2s ease;

  position: relative;

}



.checkbox-group .form-check-input:checked {

  background-color: #007bff;

  border-color: #007bff;

}



.checkbox-group .form-check-input:checked::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 5px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 2px 2px 0;

  transform: rotate(45deg);

}



/* Checkbox Etiketi */

.checkbox-group .form-check-label {

  font-size: 12px;

  color: #555;

  cursor: pointer;

}



.siralabuton {

  font-size: 12px;

}



.filtrelink{

  font-size: 12px;

  background-color: #ffdb78;

  padding: 5px;

  color: #000;

  text-decoration: none;

}



.filtrelink:hover{

  text-decoration: underline;

}



/* Canlı Destek Butonu */

.support-button {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: flex;

  align-items: center;

  background-color: #fc3434;

  color: white;

  border-radius: 50px;

  padding: 10px 15px;

  font-size: 12px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;

}



.support-button:hover {

  background-color: #c01a1a;

}



.support-icon {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  margin-right: 8px;

  object-fit: cover;

}



/* Ara Destek Butonu */

.aras-button {

  position: fixed;

  bottom: 80px;

  right: 20px;

  display: flex;

  align-items: center;

  background-color: #000000;

  color: white;

  border-radius: 50px;

  padding: 10px 15px;

  font-size: 12px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;

}



.aras-button:hover {

  background-color: #313131;

}



.aras-icon {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  margin-right: 8px;

  object-fit: cover;

}



/* Chat Kutusu */

.chat-box {

  display: none;

  position: fixed;

  bottom: 80px;

  right: 20px;

  width: 300px;

  background-color: #fff;

  border-radius: 8px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  overflow: hidden;

  animation: slideUp 0.3s ease-out;

  font-size: 14px;

  height: 400px;

}



.chat-header {

  background-color: #ff3636;

  color: white;

  padding: 10px;

  font-weight: bold;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.chat-header button {

  background-color: transparent;

  border: none;

  color: white;

  font-size: 12px;

  cursor: pointer;

  margin-bottom: 10px;

}



.chat-content {

  padding: 15px;

  overflow-y: auto;

  flex: 1;

}



.topic-btn {

  display: block;

  margin: 10px 0;

  padding: 10px;

  text-align: left;

  border: none;

  width: 100%;

  cursor: pointer;

  font-size: 12px;

}



.topic-btn.red {

  background-color: #fc3434;

  color: white;

}



.topic-btn.white {

  background-color: #fff;

  color: #333;

  border: 1px solid #ccc;

}



.topic-btn:hover {

  background-color: #f1f1f1;

}



.back-btn {

  background-color: #ddd;

  padding: 8px;

  border-radius: 5px;

  cursor: pointer;

  font-size: 12px;

  margin-bottom: 10px;

}



.chat-input {

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  margin-top: 10px;

  display: none;

  font-size: 14px;

}



@keyframes slideUp {

  from {

    transform: translateY(100%);

  }

  to {

    transform: translateY(0);

  }

}



/* Genel Chat Penceresi */

.chat-box {

  display: none; /* İlk başta gizli */

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 300px;

  height: 400px;

  background-color: #fff;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  overflow: hidden;

  z-index: 1000;

}



.chat-header {

  background-color: #f44336;

  color: white;

  padding: 10px;

  text-align: center;

  font-weight: bold;

  font-size: 14px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.chat-header button {

  background: transparent;

  border: none;

  color: white;

  font-size: 18px;

  cursor: pointer;

}



.chat-content {

  padding: 15px;

  overflow-y: auto;

  height: calc(100% - 80px); /* Header + input alanını çıkar */

}



.chat-input {

  width: 100%;

  padding: 10px;

  border: none;

  border-top: 1px solid #ccc;

  border-radius: 0 0 10px 10px;

  font-size: 14px;

}



.topic-btn {

  background-color: #f44336;

  color: white;

  border: none;

  padding: 8px;

  margin: 3px 0;

  border-radius: 5px;

  width: 100%;

  text-align: center;

  cursor: pointer;

  font-size: 12px;

}



.topic-btn.red {

  background-color: #f44336;

  font-size: 12px;

}



.topic-btn.white {

  background-color: #fff;

  color: #f44336;

  font-size: 12px;

}



.topic-btn:hover {

  background-color: #a03634;

  color: #fff;

}



hr {

  border: 0;

  border-top: 1px solid #ddd;

  margin: 15px 0;

}



/* Mesaj Bırakmak İstiyorum Formu (Roboform) */

.roboform {

  display: flex;

  flex-direction: column;

  font-size: 13px;

  color: #333;

  gap: 0; /* Tüm boşlukları kaldır */

}



.roboform label {

  font-weight: 300;

  font-size: 12px;

}



.roboform input,

.roboform textarea {

  padding: 5px;

  border: 1px solid #ccc;

  border-radius: 5px;

  font-size: 12px;

  margin-bottom: .3rem;

  width: 100%; /* Form elemanları genişliği %100 olacak */

  box-sizing: border-box; /* Padding ve border'lar genişlik dahil edilsin */

}



.roboform textarea {

  height: 60px; /* Textarea'nın yüksekliği sabit */

}



.roboform button.submit-btn {

  background-color: #f44336;

  color: white;

  border: none;

  padding: 12px;

  border-radius: 5px;

  font-size: 14px;

  cursor: pointer;

  margin-top: 10px; /* Gönder butonunun altına biraz boşluk */

}



.roboform button.submit-btn:hover {

  background-color: #e53935;

}



/* Geri Dön Butonu */

.back-btn {

  background-color: transparent;

  color: #f44336;

  border: none;

  font-size: 10px;

  cursor: pointer;

  margin-bottom: 10px;

  text-align: right;

  float: right;

}



/* Chat Box Kaydırılabilir */

.chat-box {

  max-height: 500px; /* Maksimum yükseklik */

  overflow-y: auto; /* Dikey kaydırma */

  padding-bottom: 5px; /* Alt kısmı kaydırma için biraz boşluk bırak */

}



.success-icon {

  width: 80px;

  height: 80px;

  margin-top: 10px;

}



.info-image {

  height: 80px;

  margin-top: 5px;

  float: middle;

}



.siparistakipsordiv {

  padding: 1rem 30px;

  border-radius: 15px;

  border: 1px solid #6b6b6b5b;

}



.siparistakipsortitle {

  font-size: 12px;

  font-weight: 300;

}



.siparistakipsorinp {

  font-size: 12px;

  height: 40px;

  border-radius: 1px;

}



.siparistakipsorbtn {

  font-size: 12px;

  height: 60px;

}



/* Yalnızca doğrulama kısmını düzenliyoruz */

.verification-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.captcha-img {

  height: 40px; /* Yükseklik oranını koru */

  margin-right: 10px;

}



.adreskurtextarea {

  height: 100px; /* Yükseklik oranını koru */

}



/* Genel stiller */

.file-upload-container {

  position: relative;

  width: 100%;

  text-align: center;

}



.file-upload-label {

  display: block;

  width: 100%;

  padding: 15px;

  background-color: #f1f1f1;

  border: 2px solid #ccc;

  text-align: center;

  border-radius: 5px;

  cursor: pointer;

  font-size: 12px;

  color: #333;

  position: relative;

  transition: background-color 0.5s ease;

}



.file-upload-label i {

  margin-right: 10px;

  font-size: 14px;

}



input[type="file"] {

  display: none;  /* Dosya inputunu gizler */

}



#file-upload-text {

  display: block;

  font-size: 12px;

  line-height: 1.5;

}



.loader-container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  display: none;

  width: 100%;

}



.loader {

  border: 4px solid rgba(255, 255, 255, 0.3);

  border-top: 4px solid #3498db;

  border-radius: 50%;

  width: 24px;

  height: 24px;

  animation: spin 1s linear infinite;

  margin: 0 auto;

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



.progress-barku {

  width: 0%;

  height: 5px;

  background-color: #3498db;

  position: absolute;

  bottom: 0;

  left: 0;

  transition: width 0.3s ease;

}



.success-message {

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 12px;

  color: #ffffff;

  padding: 15px;

  background-color: #28a745;

  border-radius: 5px;

  position: relative;

  margin-top: 10px;

  display: none;

}



.more-authors {

  cursor: pointer;

  color: #007bff;

  text-decoration: none;

}

.more-authors:hover {

  text-decoration: underline;

}



.success-message i {

  font-size: 20px;

  margin-right: 10px;

}



.success-message span {

  font-size: 12px;

}



.file-upload-container.succeeded {

  animation: shake 0.5s ease-out;

}



@keyframes shake {

  0% { transform: translateX(0); }

  25% { transform: translateX(-10px); }

  50% { transform: translateX(10px); }

  75% { transform: translateX(-10px); }

  100% { transform: translateX(0); }

}



/* Sağdaki divin tam yüksekliği kapsaması ve iç kaydırma yapabilmesi için */

.rowodeme {

  display: flex;

  height: 100vh; /* Tam ekran yüksekliği */

}



/* Sol sütun */

.soldivodeme {

  height: 100vh;

  padding: 2rem 5rem;

  font-size: 12px;

}



/* Sağ sütun (sticky) */

.dividerodeme {

  border-right: 1px solid #ddd; /* Ortadaki çizgi */

}



.odemesepet-odeme {

  display: flex;

  align-items: center;

  padding: 1rem;

}



.product-image-odeme {

  position: relative;

  width: 60px;

  height: 60px;

  background-color: #fff;

  border: 1px solid #6161619d;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 5px;

}



.product-image-odeme img {

  max-width: 100%;

  max-height: 100%;

}



.quantity-badge-odeme {

  position: absolute;

  bottom: 45px;

  left: 45px;

  background-color: rgba(0, 0, 0, 0.75);

  color: #fff;

  border-radius: 50%;

  width: 24px;

  height: 24px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 0.75rem;

}



.product-details-odeme {

  flex-grow: 1;

  margin-left: 1rem;

}



.product-name-odeme {

  font-weight: bold;

  font-size: 1rem;

}



.product-description-odeme {

  font-size: 0.875rem;

  color: #666;

}



.product-price-odeme {

  font-weight: bold;

  font-size: 1rem;

  white-space: nowrap;

}



.kuponodemeinp {

  font-size: 12px;

  background-color: #ffffff;

  border: 1px solid #94949483;

  height: 50px;

  border-radius: 5px;

  padding: 10px;

} 



.kuponodemebtn {

  font-size: 12px;

  background-color: #F1F1F1;

  border: 1px solid #94949483;

  height: 50px;

  border-radius: 5px;

  padding: 10px;

}



.kuponodemebtnaktif {

  font-size: 12px;

  background-color: #000000;

  color: #ffffff;

  height: 50px;

  border-radius: 5px;

  padding: 10px;

}



.kuponodemebtnaktif:hover{

  background-color: #494949;

}



  .checkbox-wrapper-4 * {

    box-sizing: border-box;

    font-size: 12px;

  }

  .checkbox-wrapper-4 .cbx {

    -webkit-user-select: none;

    user-select: none;

    cursor: pointer;

    padding: 6px 8px;

    border-radius: 6px;

    overflow: hidden;

    transition: all 0.2s ease;

    display: inline-block;

  }

  .checkbox-wrapper-4 .cbx:not(:last-child) {

    margin-right: 6px;

  }

  .checkbox-wrapper-4 .cbx:hover {

    background: rgba(0,119,255,0.06);

  }

  .checkbox-wrapper-4 .cbx span {

    float: left;

    vertical-align: middle;

    transform: translate3d(0, 0, 0);

  }

  .checkbox-wrapper-4 .cbx span:first-child {

    position: relative;

    width: 18px;

    height: 18px;

    border-radius: 4px;

    transform: scale(1);

    border: 1px solid #cccfdb;

    transition: all 0.2s ease;

    box-shadow: 0 1px 1px rgba(0,16,75,0.05);

  }

  .checkbox-wrapper-4 .cbx span:first-child svg {

    position: absolute;

    top: 3px;

    left: 2px;

    fill: none;

    stroke: #fff;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

    stroke-dasharray: 16px;

    stroke-dashoffset: 16px;

    transition: all 0.3s ease;

    transition-delay: 0.1s;

    transform: translate3d(0, 0, 0);

  }

  .checkbox-wrapper-4 .cbx span:last-child {

    padding-left: 8px;

    line-height: 18px;

  }

  .checkbox-wrapper-4 .cbx:hover span:first-child {

    border-color: #07f;

  }

  .checkbox-wrapper-4 .inp-cbx {

    position: absolute;

    visibility: hidden;

  }

  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {

    background: #07f;

    border-color: #07f;

    animation: wave-4 0.4s ease;

  }

  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {

    stroke-dashoffset: 0;

  }

  .checkbox-wrapper-4 .inline-svg {

    position: absolute;

    width: 0;

    height: 0;

    pointer-events: none;

    user-select: none;

  }

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

    .checkbox-wrapper-4 .cbx {

      width: 100%;

      display: inline-block;

    }

  }

  @-moz-keyframes wave-4 {

    50% {

      transform: scale(0.9);

    }

  }

  @-webkit-keyframes wave-4 {

    50% {

      transform: scale(0.9);

    }

  }

  @-o-keyframes wave-4 {

    50% {

      transform: scale(0.9);

    }

  }

  @keyframes wave-4 {

    50% {

      transform: scale(0.9);

    }

  }



  .radio-wrapper-12 {

    display: flex;

    flex-direction: column;

    gap: 10px;

    z-index: 3;

  }

  

  .radio-wrapper-12 * {

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    font-size: 12px;

  }

  

  .radio-wrapper-12 label {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 0px 20px;

    width: 150px;

    cursor: pointer;

    height: 50px;

    position: relative;

  }

  

  .radio-wrapper-12 label::before {

    position: absolute;

    content: "";

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 150px;

    height: 45px;

    z-index: -1;

    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    border-radius: 10px;

    border: 2px solid transparent;

  }

  .radio-wrapper-12 label:hover::before {

    transition: all 0.2s ease;

    background-color: #F5F6FA;

  }

  

  .radio-wrapper-12 label:has(input:checked)::before {

    background-color: #E1E9FF;

    border-color: #435dd8;

    height: 50px;

  }

  .radio-wrapper-12 label .text {

    color: #333;

  }

  

  .radio-wrapper-12 label input[type="radio"] {

    background-color: #D9D9E5;

    appearance: none;

    width: 17px;

    height: 17px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    outline: 0;

  }

  .radio-wrapper-12 label input[type="radio"]:checked {

    background-color: #435dd8;

    -webkit-animation: pulse-12 0.7s forwards;

    animation: pulse-12 0.7s forwards;

  }

  

  .radio-wrapper-12 label input[type="radio"]:before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);

    background-color: #fff;

    transform: scale(0);

  }

  

  .radio-wrapper-12 label input[type="radio"]:checked::before {

    transform: scale(1);

  }

  

  @keyframes pulse-12 {

    0% {

      box-shadow: 0 0 0 0 rgba(0, 0, 255, 0.4);

    }

    70% {

      box-shadow: 0 0 0 8px rgba(0, 0, 255, 0);

    }

    100% {

      box-shadow: 0 0 0 0 rgba(0, 0, 255, 0);

    }

  }     



  .radio-wrapper-26 {

    width: 90%;

  }



  .radio-wrapper-26 label {

    display: flex;

    align-items: flex-start;

    text-align: left;

    min-width: 140px;

    justify-content: space-between;

    padding: 11px;

    border: none;

    border-radius: 6px;

    box-shadow: 0 0 0 1px #d8dee4;

    transition: all 0.2s ease;

    font-size: .875rem;

    cursor: pointer;

  }



  .radio-wrapper-26 label:not(:has(input:disabled)):hover {

    background: #f5f6f8;

  }



  .radio-wrapper-26 label:has(input:disabled) {

    opacity: .8;

    cursor: not-allowed;

    background: #f5f6f8;

  }



  .radio-wrapper-26 label:has(input:checked) {

    box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 1px #d8dee4;

  }



  .radio-wrapper-26 label:has(input:focus) {

    box-shadow: 0 0 0 1.5px rgb(37 99 235), 0 0 0 4px rgb(191 219 254), 0 0 0 1px #d8dee4;

  }



  .radio-wrapper-26 label .inputAndLeftText {

    display: flex;

    gap: .75em;

  }



  .radio-wrapper-26 label .inputAndLeftText div {

    color: rgb(55 65 81);

    line-height: 1.25rem;



    display: flex;

    flex-direction: column;

  }



  .radio-wrapper-26 label .title,

  .radio-wrapper-26 label .price {

    font-weight: 500;

  }



  .radio-wrapper-26 label .desc {

    color: rgb(107 114 128);

  }



  .radio-wrapper-26 input,

  .radio-wrapper-26 label .price {

    color: rgb(37 99 235);

  }



  .radio-wrapper-26 label .price {

    margin-top: 1px;

  }



  .radio-wrapper-26 input {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    padding: 0;

    -webkit-print-color-adjust: exact;

    print-color-adjust: exact;

    display: inline-block;

    vertical-align: middle;

    background-origin: border-box;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;



    border: 1px solid rgb(209 213 219);



    box-shadow: 0 1px 2px 0 #0000000d;

    border-radius: 9999px;

    width: 1rem;

    height: 1rem;



    margin: 2px 0 0;

  }



  .radio-wrapper-26 input:checked {

    border-color: #0000;

    background-color: currentColor;

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjMiLz48L3N2Zz4=);

  }



  .radio-wrapper-26 input:focus {

    box-shadow: 0 0 0 3px rgb(191 219 254), 0 1px 2px 0 #0000000d;

  }



  .radio-wrapper-26 input:disabled,

  .radio-wrapper-26 label:has(input:disabled) .price {

    color: rgb(175, 156, 156);

  }



  .radio-wrapper-27 {

    width: 90%;

    cursor: pointer;

  }



  .radio-wrapper-27 label {

    display: flex;

    align-items: flex-start;

    text-align: left;

    min-width: 140px;

    justify-content: space-between;

    padding: 11px;

    border: none;

    border-radius: 6px;

    box-shadow: 0 0 0 1px #e4d8d8;

    transition: all 0.2s ease;

    font-size: .875rem;

    cursor: pointer;

  }



  .radio-wrapper-27 label:not(:has(input:disabled)):hover {

    background: #f8f5f5;

  }



  .radio-wrapper-27 label:has(input:disabled) {

    opacity: .8;

    cursor: not-allowed;

    background: #f8f5f5;

  }



  .radio-wrapper-27 label:has(input:checked) {

    box-shadow: 0 0 0 1.5px rgb(235, 37, 37), 0 0 0 1px #d8dee4;

  }



  .radio-wrapper-27 label:has(input:focus) {

    box-shadow: 0 0 0 1.5px rgb(235, 37, 37), 0 0 0 4px rgb(191 219 254), 0 0 0 1px #d8dee4;

  }



  .radio-wrapper-27 label .inputAndLeftText {

    display: flex;

    gap: .75em;

  }



  .radio-wrapper-27 label .inputAndLeftText div {

    color: rgb(81, 55, 55);

    line-height: 1.25rem;



    display: flex;

    flex-direction: column;

  }



  .radio-wrapper-27 label .title,

  .radio-wrapper-27 label .price {

    font-weight: 500;

  }



  .radio-wrapper-27 label .desc {

    color: rgb(128, 107, 107);

  }



  .radio-wrapper-27 input,

  .radio-wrapper-27 label .price {

    color: rgb(235, 37, 37);

  }



  .radio-wrapper-27 label .price {

    margin-top: 1px;

  }



  .radio-wrapper-27 input {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    padding: 0;

    -webkit-print-color-adjust: exact;

    print-color-adjust: exact;

    display: inline-block;

    vertical-align: middle;

    background-origin: border-box;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;



    border: 1px solid rgb(219, 209, 209);



    box-shadow: 0 1px 2px 0 #0000000d;

    border-radius: 9999px;

    width: 1rem;

    height: 1rem;



    margin: 2px 0 0;

  }



  .radio-wrapper-27 input:checked {

    border-color: #0000;

    background-color: currentColor;

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjMiLz48L3N2Zz4=);

  }



  .radio-wrapper-27 input:focus {

    box-shadow: 0 0 0 3px rgb(254, 191, 191), 0 1px 2px 0 #0000000d;

  }



  .radio-wrapper-27 input:disabled,

  .radio-wrapper-27 label:has(input:disabled) .price {

    color: rgb(175, 156, 156);

  }



  .odemeilkbtn {

    font-size: 12px;

    height: 60px;

  }



  .odemesonbtn {

    font-size: 12px;

    height: 60px;

  }



/* kredi kart kısmı */

.cardForm-Field50 {

  float: left;

  width: 50%;

}



/* Makes the default card text easier to read */

.jp-card .jp-card-front .jp-card-display, .jp-card .jp-card-back .jp-card-display {

  text-shadow: 0 1px 2px #1D1F20;

}

/* Changes the default styles */

.jp-card .jp-card-front, .jp-card .jp-card-back {

  background: #727272!important;

}



.ccinput {

  padding: 10px;

  font-size: 12px;

  color: #000;

  height: 50px; 

  box-shadow: none;

  padding: 10px;

  border: 1px solid #96969669;

}



.cvjp {

  border-left: 0px;

}



input.secondRow {

  float: left;

  display: block;

  width: 100%;

}



.CardDefault, .CardDefault:hover {

  background: gray;

  color: #fff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.CardWarning,.CardWarning:hover {

  background: red;

  color: #fff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}

.CardGood, .CardGood:hover {

  background: #27ae60;

  color: #fff;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

}



.kalineft {

  font-weight: 800;

}



.bankabilgieft {

  border: 1px solid #75757550;

  border-radius: 10px;

  padding: 10px;

  margin-bottom: 1rem;

}



.ibaninp {

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ccc;

  padding: 8px;

  border-radius: 5px;

  max-width: 400px;

  margin: 0 auto; /* Tam sayfa ortalamak için */

  position: relative;

}



.ibaninp label {

  position: absolute;

  top: -6px; /* İBAN yazısını input alanının üstüne koyar */

  left: 10px;

  font-size: 10px; /* Küçük yazı tipi */

  color: #333; /* Yazı rengi */

  background-color: #fff; /* Etiketin arka planı, input ile örtüşmesini engeller */

  padding: 0 5px; /* Etiketin daha okunabilir olması için */

  font-weight: 800;

}



.ibaninp input {

  flex: 1;

  text-align: center; /* İban numarasını ortalamak için */

  border: none;

  font-size: 12px;

  background-color: transparent;

  color: #333;

  padding: 5px;

}



.ibaninp input:focus {

  outline: none;

}



.ibaninp button {

  margin-left: 8px;

  background-color: #000000;

  color: white;

  border: none;

  padding: 8px 12px;

  cursor: pointer;

  border-radius: 4px;

  font-size: 12px;

}



.ibaninp button:hover {

  background-color: #313131;

}



.yansonodediv {

  /* Diğer stil özellikleriniz burada olabilir */

  padding: 10px;

  border-radius: 5px;

  background-color: #f8d7da; /* Başlangıçta arka plan rengi */

  color: #721c24;  /* Yazı rengi */

  font-size: 16px;



  /* Yanıp sönme efekti sadece arka planda */

  animation: blinkBackground 1s infinite;

}



@keyframes blinkBackground {

  0% {

    background-color: #f8d7da; /* Kırmızı arka plan */

  }

  50% {

    background-color: #f5c6cb; /* Daha açık kırmızı */

  }

  100% {

    background-color: #f8d7da; /* Kırmızı arka plan */

  }

}



/* Avantaj Container Düzenlemesi */
.avantaj-container {
  background-color: transparent;
  padding: 30px;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 5px auto;
  transition: all 0.3s ease;
  text-align: center;
}

/* Sadece hover efekti */
.hovereff:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Header styling - kırmızı renk ve yavaşlatılmış daktilo efekti */
.avantaj-header {
  position: relative;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

.avantaj-header h3 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 2;
  color: #F44336;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .1em;
  animation: typing 5s steps(30, end);
  max-width: fit-content;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Bubbles - sadece dekoratif baloncuklar */
.bubble1, .bubble2 {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.bubble1 {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.3), rgba(255, 152, 0, 0.2));
  top: -30px;
  right: 10%;
  animation: float 8s ease-in-out infinite;
}

.bubble2 {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.3), rgba(244, 67, 54, 0.1));
  top: 5px;
  left: 15%;
  animation: float 6s ease-in-out infinite 1s;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-15px) rotate(3deg);
  }
  60% {
    transform: translateY(8px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Liste öğeleri - ortalanmış ve küçültülmüş */
.avantaj-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avantaj-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  width: 100%;
  max-width: 80%;
  border-bottom: 1px dashed rgba(244, 67, 54, 0.15);
  transition: all 0.3s ease;
}

.avantaj-item:last-child {
  border-bottom: none;
}

.avantaj-item:hover {
  transform: translateY(-5px);
  background: linear-gradient(90deg, rgba(244, 67, 54, 0.03), transparent);
  border-radius: 6px;
}

.avantaj-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;  /* Yazı boyutu küçültüldü */
  color: #444;
  line-height: 1.4;
}

.avantaj-text i {
  margin-right: 15px;
  transition: all 0.3s ease;
}

.avantaj-item:hover i {
  transform: scale(1.2) rotate(5deg);
}

/* Login/Register container */
.login-register-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.login-register-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 3px;
  background: linear-gradient(90deg, #F44336, #FF9800, #F44336);
  animation: slide 3s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

/* İkonlar için animasyon */
.avantaj-item:hover .fa-heart {
  animation: heartbeat 1.2s infinite;
  color: #ff4757;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

.avantaj-item:hover .far:not(.fa-heart) {
  animation: swing 1s infinite;
  color: #F44336;
}

@keyframes swing {
  20% {
    transform: rotate(8deg);
  }
  40% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(4deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Responsive düzenlemeler */
@media (max-width: 992px) {
  .avantaj-container {
    padding: 20px 15px;
  }
  
  .avantaj-header h3 {
    font-size: 1.7rem;
  }
  
  .login-register-container {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .avantaj-text {
    font-size: 0.85rem;
  }
  
  .login-register-container {
    flex-direction: column;
    gap: 12px;
  }
  
  .bubble1 {
    width: 80px;
    height: 80px;
  }
}





.kalinbaslikode {

  font-weight: 600;

}



.taksitduyuru {

  border: 1px solid #97979777;

  padding: 15px;

  font-size: 12px;

  width: 100%;

}



.bank-select-container {

  position: relative;

  display: flex;

  align-items: center;

}



.bank-select {

  width: 100%;

}



.bank-logo {

  position: absolute;

  right: 2.5rem; /* Seçime göre konumu ayarlayabilirsiniz */

  height: 25px;

  margin-bottom: 1rem;

}



.kaldirgg {

  font-size: 10px;

  color: #000;

  text-decoration: none;

  font-weight: 600;

  margin-left: .5rem;

}



.kaldirgg:hover {

  color: #f70000;

  text-decoration: underline;

}



.puankaldir {

  font-size: 10px;

  color: #000;

  text-decoration: none;

  font-weight: 600;

  margin-left: .5rem;

}



.puankaldir:hover {

  color: #f70000;

  text-decoration: underline;

}



.kurumsaltitle {

  font-weight: 800;

  text-decoration: underline;

  text-decoration-color: red;

  margin-bottom: 1rem;

}



.krmbtn {

  min-height: 200px;

}



    /* Slayt kapsayıcı stil */

    .custom-carousel-item img {

      width: 100%;

      border-radius: 10px;

      object-fit: cover; /* Resmin tüm alanı kaplamasını sağlar */

  }



  /* Sol üstteki sabit yazı */

  .custom-carousel-container {

      position: relative;

      width: 100%;

      max-width: 600px; /* Maksimum genişlik */

      margin: auto;

      overflow: hidden;

      border-radius: 10px;

  }



  .custom-carousel-item {

      position: relative;

  }



  .custom-text {

      position: absolute;

      top: 20px; /* Üstten 20px mesafe */

      left: 20px; /* Soldan 20px mesafe */

      color: white;

      padding: 5px 10px;

      border-radius: 5px;

      font-size: 18px;

      z-index: 10; /* Yazının resmin üstünde kalmasını sağlamak için */

  }

  .ogtitle1 {
    font-weight: 300;
    position: relative;
    padding-left: 20px;
    display: inline-block;
    margin-bottom: 15px;
    text-decoration: none;
    line-height: 1.5;
}

/* Sadece sol dikey çizgi */
.ogtitle1::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 3px;
    background-color: #ff0000;
    border-radius: 1px;
}

.ogtitle2 {
  font-weight: 300;
  position: relative;
  padding-left: 20px;
  display: inline-block;
  margin-bottom: 15px;
  text-decoration: none;
  line-height: 1.5;
}

/* Sadece sol dikey çizgi */
.ogtitle2::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: 3px;
  background-color: blue;
  border-radius: 1px;
}



.ogteslimfatdiv {

  background-color: #f1f5ff8c;

  border: 1px solid #a7a7a74f;

  color: #000;

  padding: 15px;

  border-radius: 5px;

}



.kaydirfatura {

  max-height: 300px;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 10px;

  border: 1px solid #ddd;

  border-radius: 5px;

  scrollbar-width: thin;

  scrollbar-color: #ccc #f9f9f9;

  background-color: #f9f9f9;

}



.story-container-wrapper {

  position: relative;

  padding: 1rem;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

}



.story-container {

  display: flex;

  gap: 1.5rem;

  overflow-x: auto;

  scroll-behavior: smooth;

  padding: 1rem 0;

  white-space: nowrap;

}



.story-container::-webkit-scrollbar {

  display: none;

}



.story-box {

  width: 80px;

  height: 80px;

  border: 3px solid #fc4d4d; /* Pastel kırmızı çerçeve */

  border-radius: 50%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  cursor: pointer;

}



.story-box img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



.story-title {

  text-align: center;

  font-size: 12px;

  margin-top: 0.5rem;

  color: #333;

}



.scroll-btn {

  position: absolute;

  top: 40%;

  transform: translateY(-50%);

  background-color: #faf8f8;

  border: 1px solid #ddd;

  border-radius: 50%;

  width: 25px;

  height: 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  display: none; /* Başlangıçta gizli */

}



.scroll-btn.left {

  left: 0.5rem;

}



.scroll-btn.right {

  right: 0.5rem;

}



.kampanyadiv {

  padding: 20px;

  background-color: #f9f9f9;

  border-radius: 8px;

  border: 1px solid #ffa8a8;

  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

}



.carousel-container {

  position: relative;

}



.swiper-slide img {

  width: 100%;

  height: auto;

  border-radius: 8px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}



.swiper-button-next,

.swiper-button-prev {

  color: #333;

}



.swiper-pagination-bullet {

  background-color: #333;

}



.book-box {

  border: 1px solid #ddd;

  border-radius: 8px;

  padding: 20px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23ddd' stroke-width='.5' d='M0 0H10V10'%3E%3C/path%3E%3C/svg%3E");

  background-size: 20px 20px;

  background-color: white; /* Arka plan rengini beyaz yaptık */

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  display: flex;

  gap: 30px; /* Resim ve metin arasındaki boşluğu artır */

}



.book-img {

  width: 120px;

  height: 180px;

  object-fit: cover;

  border-radius: 8px;

}



.book-info {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  margin-left: 10px; /* Metni biraz daha sağa kaydır */

}



.book-info h5 {

  font-size: 18px;

  margin-bottom: 10px;

}



.book-info p {

  margin: 0;

  font-size: 14px;

  color: #555;

}



/* Slider Kontrol Butonları */

.slider-controls {

  position: absolute;

  bottom: 10px;

  right: 10px;

  display: flex;

  gap: 10px;

}



.slider-btn-prev,

.slider-btn-next {

  width: 30px;

  height: 30px;

  background-color: #333;

  border: none;

  border-radius: 50%;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 20px; /* İçeriği görünür yapmak için boyut */

}



.slider-btn-prev:hover,

.slider-btn-next:hover {

  background-color: #555;

}



/* Loader */

.slider-loader {

  height: 4px;

  background-color: yellow;

  width: 0;

  margin-top: 1px;

  border-radius: 4px;

  animation: loader-animation 3s infinite; /* 3 saniyelik animasyon */

}



@keyframes loader-animation {

  from {

      width: 0;

  }

  to {

      width: 100%;

  }

}



/* Kampanya İçeriği Yazısı */

.campaign-label {

  transform-origin: left bottom;

  font-size: 13px;

  font-weight: bold;

  color: #333;

  background-color: #f9f9f9;

  padding: 5px 10px;

  border: 1px solid #ddd;

  border-radius: 4px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  white-space: nowrap; /* Tek satırda tut */
  
  width: 200px;

}



/* FlipClock */

#flipdown {

  margin: 0 auto;

}



.kalansuretitle {

  font-weight: 300; 

  text-decoration: underline; 

  color: #f03f3f; 

  text-decoration-color: #000;

}



.testo {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='%23d32f2f' stroke-opacity='0.1' stroke-width='.5' d='M0 0H10V10'%3E%3C/path%3E%3C/svg%3E");

  background-size: 35px 35px;

}



.slidesu {

  border-radius: 10px; 

  height: 390px;

}



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

  .mobilgizle{

  display: none !important;

  }



  .slidesu {

    border-radius: 10px; 

    width: 100%;

    height: 100%;

  }



  .flashduyuru{

    display: none !important;

  }

  }



  @media only screen and (min-width: 701px) {

    .masaustugizle {

      display: none !important;

    }

  }



  /* Keeping all existing styles */

.mobilaltmenu {

  display: none;

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  background: white;

  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);

  z-index: 1000;

  padding: 5px 0;

  border-top-left-radius: 18px;

  border-top-right-radius: 18px;

}



.mobilaltmenu-container {

  display: grid;

  grid-template-columns: repeat(2, 1fr) auto repeat(2, 1fr);

  align-items: center;

  position: relative;

}



.mobilaltmenu-item {

  text-align: center;

  color: #6c757d;

  text-decoration: none;

  transition: all 0.3s ease;

  padding: 4px 0;

}



.mobilaltmenu-item i {

  font-size: 18px;

  display: block;

  margin-bottom: 3px;

  transition: transform 0.3s ease;

}



.mobilaltmenu-item span {

  font-size: 10px;

  display: block;

}



.mobilaltmenu-item:hover {

  color: #000000;

}



.mobilaltmenu-item:hover i {

  transform: scale(1.1);

}



/* Sepet butonu özel stil */

.mobilaltmenu-cart {

  width: 62px;

  height: 62px;

  position: relative;

  margin-top: -32px;

  text-decoration: none;

}



.mobilaltmenu-cart-circle {

  background: #ff4646;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 15px rgba(255, 70, 70, 0.3);

  transition: all 0.3s ease;

}



.mobilaltmenu-cart-circle::before {

  content: '';

  position: absolute;

  top: -3px;

  left: -3px;

  right: -3px;

  bottom: -3px;

  background: white;

  border-radius: 50%;

  z-index: -1;

}



.mobilaltmenu-cart i {

  font-size: 22px;

  color: white;

  margin-bottom: 1px;

}



.mobilaltmenu-cart span {

  font-size: 9px;

  color: white;

}



.mobilaltmenu-cart:hover .mobilaltmenu-cart-circle {

  transform: translateY(-5px);

  box-shadow: 0 6px 18px rgba(255, 70, 70, 0.35);

}



/* Yeni sepet sayacı stili */

.cart-counter {

  position: absolute;

  top: 0;

  right: 0;

  background: #ffffff;

  color: #000000;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: bold;

  z-index: 2;

}



@media (max-width: 768px) {

  .mobilaltmenu {

      display: block;

  }

}



.mobilaltmenu-item.active {

  color: #000000;

}



.mobilaltmenu-item.active i {

  transform: scale(1.1);

}



  .product-image-custom {

    width: 100%;

    margin-top: 1rem !important;

    margin-bottom: 1.2rem !important;

    object-fit: contain;

}



/* Masaüstü için */

@media (min-width: 992px) {

    .product-image-custom {

        max-width: 270px;

    }

}



/* Tablet için */

@media (min-width: 768px) and (max-width: 991.98px) {

    .product-image-custom {

        max-width: 210px;

    }

}





/* Mobil için */

@media (max-width: 767.98px) {

  .product-image-custom {

      max-width: 230px;

      display: block;

      margin-left: auto !important;

      margin-right: auto !important;

  }

}

/* Masaüstü için sepet modal düzenlemesi */

@media (min-width: 769px) {

  #sepetModal .modal-dialog {

      max-width: 500px;

      margin: 1% 1.75rem auto;

  }



  #sepetModal .modal-content {

      max-height: calc(100vh - 75px);

      border-radius: 35px;

  }



  #sepetModal .kaydirsepet {

      max-height: 500px;

      overflow-y: auto;

  }



  #sepetModal .modal-header {

      border-radius: 15px 15px 0 0;

  }

}



/* Mobil için sepet modal düzenlemesi */

@media (max-width: 768px) {

  #sepetModal {

      padding: 0 !important;

  }



  #sepetModal .modal-dialog {

      margin: 0;

      padding: 0;

      width: 100vw;

      height: 100vh;

      max-width: none;

      transform: none !important;

      position: fixed;

      top: 0;

      left: 0;

  }



  #sepetModal .modal-content {

      height: 100vh;

      border: none;

      border-radius: 0;

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

  }



  #sepetModal .modal-body {

      padding: 1rem;

      overflow-y: auto;

      height: calc(100vh - 140px);

  }



  #sepetModal .kaydirsepet {

      max-height: calc(100vh - 250px); /* Artırıldı */

      overflow-y: auto;

  }



  #sepetModal .action-buttons {

      width: 100%;

      display: flex;

      flex-direction: column;

      gap: 8px; /* Azaltıldı */

  }



  #sepetModal .action-buttons .btn {

      width: 100%;

      margin: 0;

  }



  #sepetModal .modal-footer {

      flex-direction: column;

      gap: 10px; /* Azaltıldı */

      padding: 10px;

  }



  /* Fiyatların mobile özel stil düzenlemesi */

  #sepetModal .totals {

      width: 100%;

  }



  #sepetModal .totals p {

      text-align: center;

      width: 100%;

      display: block;

      margin: 2px 0; /* Azaltıldı */

      font-size: 12px; /* Küçültüldü */

  }



  #sepetModal .totals h6 {

      text-align: center;

      width: 100%;

      display: block;

      margin: 5px 0;

      font-size: 16px; /* Toplam kısmı biraz daha büyük */

  }



  #sepetModal .totals b {

      text-align: center;

      display: inline-block;

  }

}



/* Genel sepet modal stilleri */

#sepetModal .modal-footer {

  border-top: 1px solid #dee2e6;

  position: sticky;

  bottom: 0;

  background: white;

  z-index: 1020;

}



#sepetModal .modal-header {

  position: sticky;

  top: 0;

  background: white;

  z-index: 1020;

}



.search-wrapper {

  transition: all 0.3s ease;

}



.search-wrapper.moved-up {

  transform: translateY(-40vh);

}



.popular-tag {

  transition: all 0.2s ease;

  border-radius: 20px;

  padding: 6px 16px;

}



.popular-tag:hover {

  background-color: white;

  color: black;

}



.results-container {

  max-height: 70vh;

  overflow-y: auto;

}



.search-result-item {

  background: white;

  border-radius: 8px;

  margin-bottom: 1rem;

  transition: all 0.3s ease;

}



.search-result-item:hover {

  transform: translateY(-2px);

  box-shadow: 0 5px 15px rgba(255,255,255,0.1);

}



.book-cover {

  width: 100px;

  height: 150px;

  object-fit: cover;

}



/* Scroll bar stilleri */

.results-container::-webkit-scrollbar {

  width: 8px;

}



.results-container::-webkit-scrollbar-track {

  background: rgba(255,255,255,0.1);

  border-radius: 4px;

}



.results-container::-webkit-scrollbar-thumb {

  background: rgba(255,255,255,0.3);

  border-radius: 4px;

}



/* Sepet Modal için yeni stiller */

#sepetModal .modal-body {

  display: flex;

  flex-direction: column;

  padding: 1rem;

}



#sepetModal .cart-info-section {

  order: -1;

  margin-bottom: .1rem;

  position: sticky;

  top: 0;

  background: white;

  z-index: 2;

  padding: 10px 0;

}



#sepetModal .kaydirsepet {

  flex: 1;

  min-height: 200px;

  overflow-y: auto;

  padding: 10px 0;

}



#sepetModal .sepet-item {

  width: 100%;

  min-height: 120px;

  margin-bottom: 15px;

  background: #f9f9f9;

  display: flex;

  align-items: center;

  padding: 15px;

  border-radius: 10px;

  border: 1px solid #ddd;

}



#sepetModal .modal-footer {

  margin-top: auto;

  background: white;

  border-top: 1px solid #eee;

  padding: 15px;

}



/* Responsive düzenlemeler */

@media (max-width: 768px) {

  #sepetModal .modal-dialog {

    margin: 0;

    width: 100%;

    max-width: none;

    height: 100%;

  }

  

  #sepetModal .modal-content {

    height: 100%;

    border-radius: 0;

  }

  

  #sepetModal .kaydirsepet {

    max-height: calc(100vh - 350px);

  }

  

  #sepetModal .cart-info-section {

    padding: 10px;

  }

}



#araModal .modal-dialog{

  max-width: 100%;

}



.cocubody{

    background-image: url(https://cdn.nobelonline.net/upload/ncback.jpg);

    background-position: 0px 110px;

    background-repeat: no-repeat;

    min-height: 1400px;

}



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

  .cocubody{

    background-image: url(https://cdn.nobelonline.net/upload/ncback-mobil.jpg);

    background-position: 0px 110px;

    background-repeat: no-repeat;

    min-height: 1400px;

  }

}



.robokodiv {

  padding: 1.5rem;

  border-radius: 12px;

  background: linear-gradient(135deg, #434ffc 0%, #4430fa 100%);

  color: #fff;

  box-shadow: 0 8px 15px rgba(65, 68, 255, 0.15);

  min-height: 180px; /* Minimum yükseklik tanımlıyoruz */

}



.robo-title {

  font-size: 1.4rem;

  font-weight: 600;

  margin-bottom: 0.3rem;

}



.robo-text {

  font-size: 0.95rem;

  opacity: 0.9;

  margin-bottom: 1rem;

}



.btn-robo {

  padding: 0.5rem 1.2rem;

  border-radius: 6px;

  border: none;

  background: rgba(255,255,255,0.9);

  color: #4441ff;

  font-weight: 500;

  transition: all 0.2s ease;

  cursor: pointer;

  font-size: 0.9rem;

}



.btn-robo:hover {

  background: #fff;

  transform: translateY(-2px);

}



.robo-img {

  height: 100%;

  max-height: 200px; /* Maksimum yükseklik sınırı */

  width: auto;

  object-fit: contain;

  transition: transform 0.2s ease;

}



.robo-features {

  display: flex;

  justify-content: start;

  gap: 1.5rem;

  margin-top: 0.5rem;

}



.feature-item {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 0.8rem;

  background: rgba(255,255,255,0.1);

  border-radius: 6px;

  transition: transform 0.2s ease;

}



.feature-item:hover {

  transform: translateY(-2px);

}



.feature-item i {

  font-size: 0.9rem;

}



.feature-text {

  font-size: 0.85rem;

  opacity: 0.9;

}



@media (max-width: 991px) {

  .robokodiv {

      min-height: auto; /* Mobilde otomatik yükseklik */

  }

  

  .robo-img {

      margin: 1rem 0;

      max-height: 100px;

  }

  

  .robo-features {

      flex-wrap: wrap;

      gap: 0.8rem;

  }

  

  .feature-item {

      flex: 1;

      min-width: 140px;

      justify-content: center;

  }

}



/* SweetAlert2 özelleştirmeleri */

.tavsiye-modal-popup {

  border-radius: 20px !important;

  padding: 2rem !important;

  width: 400px !important;

}



.wizard-progress {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 2rem;

}



.progress-step {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: #f0f0f0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  color: #666;

}



.progress-step.active {

  background: #0066ff;

  color: white;

}



.progress-line {

  height: 3px;

  width: 60px;

  background: #f0f0f0;

  margin: 0 5px;

}



.progress-line.active {

  background: #0066ff;

}



.tavsiye-options {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  margin: 1.5rem 0;

}



.tavsiye-option {

  cursor: pointer;

}



.tavsiye-option input {

  display: none;

}



.option-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: #f8f8f8;

  border-radius: 12px;

  transition: 0.2s;

}



.tavsiye-option:hover .option-content {

  background: #f0f0f0;

}



.tavsiye-option input:checked + .option-content {

  background: #f0f7ff;

  border: 1.5px solid #0066ff;

}



.surprise-btn {

  width: 100%;

  padding: 12px;

  background: #ff4081;

  color: white;

  border: none;

  border-radius: 10px;

  font-size: 1rem;

  font-weight: 500;

  cursor: pointer;

  transition: 0.2s;

  margin-top: 1rem;

}



.surprise-btn:hover {

  background: #e91e63;

}



/* SweetAlert2 buton özelleştirmeleri */

.tavsiye-button {

  padding: 0.8rem 2rem !important;

}



.tavsiye-button:disabled {

  background: #cccccc !important;

  cursor: not-allowed !important;

}



.chat-container {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1.5rem;

}



.chat-message {

  position: relative;

  flex: 1;

}



.message-content {

  background: #f0f7ff;

  border-radius: 12px;

  padding: 1rem;

  position: relative;

}



.message-content:after {

  content: '';

  position: absolute;

  right: -10px;

  top: 15px;

  border-left: 10px solid #f0f7ff;

  border-top: 10px solid transparent;

  border-bottom: 10px solid transparent;

}



.chef-image {

  width: 80px;

  height: 80px;

  flex-shrink: 0;

}



.chef-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 50%;

}



.tavsiye-title {

  font-size: 1.2rem;

  color: #333;

  margin: 0;

}



.tavsiye-options {

  margin: 1.5rem auto;

}



.option-content {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: #f8f8f8;

  border-radius: 12px;

  transition: 0.2s;

  text-align: center;

}



.tavsiye-button {

  margin: 0 !important;

}



.tavsiye-modal-popup {

  padding: 1.5rem !important;

}



/* Progress bar stilleri aynı kalacak */



/* Yanıt seçenekleri için güncellenmiş stiller */

.tavsiye-option input:checked + .option-content {

  background: #f0f7ff;

  border: 1.5px solid #0066ff;

  box-shadow: 0 2px 4px rgba(0,102,255,0.1);

}



.option-text {

  font-weight: 500;

}



/* SweetAlert buton container'ı için */

.swal2-actions {

  width: 100%;

  padding: 0 1rem;

}



/* Mobil için düzenlemeler */

@media (max-width: 576px) {

  .chat-container {

      flex-direction: column-reverse;

      align-items: center;

      text-align: center;

  }



  .message-content:after {

      right: 50%;

      top: -10px;

      transform: translateX(50%) rotate(-90deg);

  }



  .chef-image {

      margin-bottom: 1rem;

  }

}



.tavsiye-modal-popup {

  max-height: 90vh !important;

  display: flex !important;

  flex-direction: column !important;

}



.tavsiye-html-container {

  margin: 0 !important;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.tavsiye-options-wrapper {

  flex: 1;

  overflow-y: auto;

  margin: 1rem -1.5rem;

  padding: 0 1.5rem;

  max-height: 300px; /* Sabit yükseklik */

}



.tavsiye-options {

  padding-right: 5px; /* Scrollbar için boşluk */

}



/* Özel scrollbar stilleri */

.tavsiye-options-wrapper::-webkit-scrollbar {

  width: 6px;

}



.tavsiye-options-wrapper::-webkit-scrollbar-track {

  background: #f1f1f1;

  border-radius: 3px;

}



.tavsiye-options-wrapper::-webkit-scrollbar-thumb {

  background: #888;

  border-radius: 3px;

}



.tavsiye-options-wrapper::-webkit-scrollbar-thumb:hover {

  background: #555;

}



.tumkategori {

  --tk-primary: #dc2626;

  --tk-primary-dark: #991b1b;

  --tk-primary-light: #fecaca;

  --tk-bg-hover: #fef2f2;

  --tk-border: #fca5a5;

  --tk-text: #111827;

  --tk-text-light: #4b5563;

  --tk-count-bg: #fee2e2;

  --tk-shadow-sm: 0 1px 2px rgba(220, 38, 38, 0.05);

  --tk-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.05);

  --tk-spacing-xs: 0.5rem;

  --tk-spacing-sm: 0.75rem;

  --tk-spacing-md: 1rem;

  --tk-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  background-color: #fff;

}



.tumkategori__box {

  height: 100%;

  background: #fff;

  border: 1px solid var(--tk-border);

  border-radius: 1rem;

  transition: var(--tk-transition);

  overflow: hidden;

}



.tumkategori__box:hover {

  box-shadow: var(--tk-shadow);

  border-color: var(--tk-primary);

}



.tumkategori__main-title {

  display: block;

  font-size: 16px;

  font-weight: 600;

  color: var(--tk-primary);

  text-decoration: none;

  padding: var(--tk-spacing-md) var(--tk-spacing-md) var(--tk-spacing-xs);

  border-bottom: 1px solid var(--tk-primary-light);

  margin-bottom: var(--tk-spacing-sm);

  transition: var(--tk-transition);

  text-align: center;

}



.tumkategori__main-title:hover {

  color: var(--tk-primary-dark);

  background: var(--tk-bg-hover);

}



.tumkategori__content {

  padding: 0 var(--tk-spacing-md) var(--tk-spacing-md);

}



.tumkategori__item {

  text-align: center;

  position: relative;

  margin-bottom: var(--tk-spacing-xs);

  border-radius: 0.5rem;

  background: #fff;

  transition: var(--tk-transition);

  font-weight: 600;

}



.tumkategori__link {

  display: flex;

  align-items: center;

  text-align: center;

  padding: var(--tk-spacing-sm);

  color: var(--tk-text);

  text-decoration: none;

  border-radius: 0.5rem;

  border: 1px solid transparent;

  transition: var(--tk-transition);

  font-size: 13px;

}



.tumkategori__link:hover {

  color: var(--tk-primary);

  background: var(--tk-bg-hover);

  border-color: var(--tk-primary-light);

}



.tumkategori__count {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 2rem;

  padding: 0.25rem 0.5rem;

  font-size: 0.75rem;

  font-weight: 500;

  color: var(--tk-primary);

  background: var(--tk-count-bg);

  border-radius: 1rem;

  transition: var(--tk-transition);

}



.tumkategori__link:hover .tumkategori__count {

  background: var(--tk-primary);

  color: #fff;

}



.tumkategori__sub {

  padding-left: var(--tk-spacing-md);

}



.tumkategori__sub .tumkategori__item {

  position: relative;

}



.tumkategori__sub .tumkategori__item::before {

  content: '';

  position: absolute;

  left: -1rem;

  top: 50%;

  width: 0.5rem;

  height: 1px;

  background: var(--tk-border);

  transition: var(--tk-transition);

}



.tumkategori__sub .tumkategori__item:hover::before {

  background: var(--tk-primary);

}



.tumkategori__sub .tumkategori__link {

  font-size: 13px;

}



.tumkategori__subsub {

  padding-left: var(--tk-spacing-md);

}



.tumkategori__subsub .tumkategori__link {

  font-size: 0.875rem;

  color: var(--tk-text-light);

}



/* Performans optimizasyonu için */

.tumkategori__box {

  contain: content;

  will-change: transform;

}



/* Responsive */

@media (max-width: 992px) {

  .tumkategori__box {

      margin-bottom: var(--tk-spacing-md);

  }

}



@media (max-width: 768px) {

  .tumkategori__sub,

  .tumkategori__subsub {

      padding-left: var(--tk-spacing-sm);

  }

  

  .tumkategori__sub .tumkategori__item::before {

      left: -0.75rem;

  }

}



/* Scroll performansı için */

@media (min-width: 992px) {

  .tumkategori__content {

      max-height: calc(100vh - 200px);

      overflow-y: auto;

      scrollbar-width: thin;

      scrollbar-color: var(--tk-primary-light) transparent;

  }



  .tumkategori__content::-webkit-scrollbar {

      width: 6px;

  }



  .tumkategori__content::-webkit-scrollbar-track {

      background: transparent;

  }



  .tumkategori__content::-webkit-scrollbar-thumb {

      background-color: var(--tk-primary-light);

      border-radius: 3px;

  }

}



.alphabet-filter {

  padding: 5px 0;

  top: 0;

  z-index: 100;

  margin-bottom: 20px;

}



.letter-btn {

  margin: 3px;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

  font-size: 12px;

}



.letter-btn:hover {

  background-color: #dc3545;

  color: white;

  border-color: #dc3545;

}



.publisher-card {

  border: 1px solid #dee2e6;

  border-radius: 8px;

  padding: 20px;

  margin-bottom: 20px !important;

  cursor: pointer;

  transition: all 0.3s ease;

  background-color: white;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

}



.publisher-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);

  border-color: #dc3545;

  background-color: #fff5f5;

  text-decoration: none;

}



.publisher-name {

  font-size: 1rem;

  font-weight: 300;

  color: #333;

  text-align: center;

  margin: 0;

  transition: all 0.3s ease;

}



.publisher-card:hover .publisher-name {

  color: #dc3545;

}



.blogsu-slider {

  position: relative;

  overflow: hidden;

  background: #000;

  border-radius: 10px;

}



.blogsu-slide {

  position: relative;

  cursor: pointer;

}



.blogsu-slide img {

  width: 100%;

  height: 400px;

  object-fit: cover;

  opacity: 0.7;

  transition: opacity 0.3s;

}



.blogsu-slide:hover img {

  opacity: 1;

}



.blogsu-content {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 20px;

  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);

  color: white;

  padding-bottom: 70px;

}



.blogsu-content h3 {

  font-size: 1.5rem;

  margin-bottom: 10px;

  text-align: center;

}



.blogsu-category {

  position: absolute;

  top: 20px;

  left: 20px;

  background: #fff;

  color: #000;

  padding: 5px 15px;

  border-radius: 20px;

  font-weight: bold;

}



.blogsu-thumb-container {

  position: absolute;

  bottom: 15px;

  left: 0;

  right: 0;

  padding: 0 15px;

  z-index: 10;

  width: 50%;

  margin: 0 auto;

}



.blogsu-thumb-row {

  display: grid;

  grid-template-columns: repeat(10, 1fr);

  gap: 8px;

  padding: 5px 0;

}



.blogsu-thumb {

  cursor: pointer;

  opacity: 0.6;

  transition: all 0.3s;

  position: relative;

  border-radius: 5px;

  overflow: hidden;

  aspect-ratio: 1;

}



.blogsu-thumb.active {

  opacity: 1;

  border: 2px solid #0d6efd;

}



.blogsu-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



@media (max-width: 1200px) {

  .blogsu-thumb-row {

      grid-template-columns: repeat(10, 1fr);

      gap: 6px;

  }

}



@media (max-width: 768px) {

  .blogsu-content {

      padding-bottom: 60px;

  }

  .blogsu-thumb-container {

      padding: 0 10px;

      width: 80%;

  }

  .blogsu-thumb-row {

      gap: 4px;

  }

}



.blogsa-section-title {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 24px;

  font-weight: 300;

  margin-bottom: 5px;

  color: #333;

}



.blogsa-item {

  display: flex;

  padding: 15px 0;

  border-bottom: 1px solid #eee;

  position: relative;

  gap: 20px;

}



.blogsa-image {

  width: 200px;

  height: 150px;

  flex-shrink: 0;

}



.blogsa-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 8px;

}



.blogsa-content {

  flex-grow: 1;

  padding-right: 70px;

}



.blogsa-title {

  font-size: 20px;

  font-weight: 600;

  color: #333;

  margin-bottom: 10px;

  text-decoration: none;

  display: block;

}



.blogsa-title:hover {

  text-decoration: underline;

  text-decoration-color: orange;

}



.blogsa-description {

  color: #555;

  margin-bottom: 12px;

  font-size: 14px;

  line-height: 1.5;

}



.blogsa-meta {

  color: #666;

  font-size: 13px;

  display: flex;

  align-items: center;

  gap: 5px;

}



.blogsa-meta i {

  font-size: 12px;

}



.blogsa-right-meta {

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: center;

}



.blogsa-time {

  background: #f8f9fa;

  padding: 8px 12px;

  border-radius: 20px;

  font-size: 13px;

  color: #666;

  white-space: nowrap;

}



.blogsa-share-wrap {

  position: relative;

}



.blogsa-share-btn {

  width: 35px;

  height: 35px;

  border: none;

  background: #2b3138;

  border-radius: 10px;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.3s;

}



.blogsa-share-btn:hover {

  background: #373d46;

}



.blogsa-share-dropdown {

  position: absolute;

  right: 100%;

  top: 50%;

  transform: translateY(-50%);

  background: #2b3138;

  border-radius: 25px;

  padding: 5px;

  display: none;

  z-index: 1000;

  margin-right: 10px;

  white-space: nowrap;

}



.blogsa-share-wrap:hover .blogsa-share-dropdown {

  display: flex;

  gap: 5px;

}



.blogsa-social-btn {

  width: 35px;

  height: 35px;

  border: none;

  background: transparent;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: background 0.3s;

  border-radius: 50%;

}



.blogsa-social-btn:hover {

  background: rgba(255,255,255,0.1);

}



@media (max-width: 768px) {

  .blogsa-item {

      flex-direction: column;

  }

  

  .blogsa-image {

      width: 100%;

      height: 200px;

  }



  .blogsa-content {

      padding-right: 0;

  }



  .blogsa-right-meta {

      position: static;

      transform: none;

      flex-direction: row;

      justify-content: flex-end;

      margin-top: 10px;

  }

}



.blogpop-sidebar {

  background: #fff;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.blogpop-title {

  font-size: 18px;

  font-weight: 600;

  color: #2c3e50;

  margin-bottom: 20px;

  padding-bottom: 10px;

  border-bottom: 2px solid #eee;

}



.blogpop-title i {

  color: #ffd700;

  margin-right: 8px;

}



.blogpop-item {

  display: flex;

  align-items: center;

  padding: 15px 0;

  border-bottom: 1px solid #eee;

  text-decoration: none;

  transition: all 0.3s ease;

}



.blogpop-item:hover {

  transform: translateX(5px);

}



.blogpop-image-wrap {

  position: relative;

  width: 100px;

  height: 70px;

  margin-right: 15px;

  overflow: hidden;

}



.blogpop-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 6px;

}



.blogpop-number {

  position: absolute;

  right: 10px;

  bottom: 10px;

  background: rgba(255,255,255,0.9);

  color: #666;

  font-size: 24px;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 4px;

}



.blogpop-content {

  flex: 1;

}



.blogpop-heading {

  font-size: 14px;

  color: #2c3e50;

  margin: 0;

  line-height: 1.4;

}



@media (max-width: 991px) {

  .blogpop-sidebar {

      margin-top: 30px;

  }

}



/* Ana Container */

.blogic-container {

  background-color: #f5f5f5;

  min-height: 100vh;

  padding: 30px 20px;

}



/* Blog Card */

.blogic-card {

  background: #fff;

  border-radius: 10px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

  padding: 30px;

  max-width: 1200px;

  margin: 0 auto;

}



/* Progress Bar */

.blogic-progress-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  z-index: 1000;

  background: rgba(0,0,0,0.1);

}



.blogic-progress-bar {

  height: 100%;

  background: #007bff;

  width: 0%;

  transition: width 0.3s ease;

}



/* Top Actions */

.blogic-top-actions {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}



.blogic-font-actions {

  display: flex;

  gap: 5px;

}



.blogic-right-actions {

  display: flex;

  align-items: center;

  gap: 10px;

}



/* Buttons */

.blogic-btn {

  padding: 8px 12px;

  border: 1px solid #dee2e6;

  background: #fff;

  border-radius: 5px;

  cursor: pointer;

  color: #495057;

  display: flex;

  align-items: center;

  gap: 5px;

  transition: all 0.2s ease;

}



.blogic-btn:hover {

  background: #f8f9fa;

  border-color: #ced4da;

}



/* Google News Button */

.blogic-google-news {

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 5px 10px;

  border-radius: 5px;

  background: #f8f9fa;

  text-decoration: none;

  color: #495057;

  font-size: 14px;

}



/* Sticky Header */

.blogic-sticky-header {

  display: none;

  position: fixed;

  top: .1px;

  left: 0;

  right: 0;

  background: white;

  padding: 15px 0;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  z-index: 999;

}



.blogic-sticky-header.visible {

  display: block;

}



.blogic-sticky-title {

  font-size: 18px;

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* Blog Header */

.blogic-header {

  margin: 20px 0;

}



.blogic-breadcrumb {

  margin-bottom: 20px;

  color: #6c757d;

  font-size: 14px;

}



.blogic-breadcrumb a {

  color: #6c757d;

  text-decoration: none;

  transition: color 0.3s ease;

}



.blogic-breadcrumb a:hover {

  color: #007bff;

}



.blogic-title {

  font-size: 32px;

  font-weight: 700;

  line-height: 1.3;

  margin-bottom: 20px;

  color: #212529;

}



/* Meta Information */

.blogic-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 0;

  border-top: 1px solid #dee2e6;

  border-bottom: 1px solid #dee2e6;

  margin-bottom: 30px;

}



.blogic-author {

  display: flex;

  align-items: center;

  gap: 15px;

}



.blogic-author img {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

}



.blogic-author-info {

  display: flex;

  flex-direction: column;

}



.blogic-author-name {

  font-weight: 600;

  color: #212529;

}



.blogic-author-title {

  font-size: 14px;

  color: #6c757d;

}



.blogic-meta-details {

  display: flex;

  gap: 20px;

  color: #6c757d;

  font-size: 14px;

}



.blogic-meta-details span {

  display: flex;

  align-items: center;

  gap: 5px;

}



/* Content Area */

.blogic-content {

  font-size: 18px;

  line-height: 1.8;

  color: #212529;

}



/* Responsive Adjustments */

@media (max-width: 992px) {

  .blogic-meta {

      flex-direction: column;

      gap: 15px;

      align-items: flex-start;

  }

  

  .blogic-meta-details {

      flex-wrap: wrap;

      gap: 15px;

  }



  .blogic-card {

      padding: 20px;

  }

}



@media (max-width: 768px) {

  .blogic-top-actions {

      flex-direction: column;

      gap: 10px;

      align-items: flex-start;

  }



  .blogic-right-actions {

      width: 100%;

      justify-content: space-between;

  }



  .blogic-title {

      font-size: 24px;

  }



  .blogic-meta-details {

      flex-direction: column;

      gap: 10px;

  }

}



.sepetcik-button {

  position: fixed;

  bottom: 140px;

  right: 20px;

  display: flex;

  align-items: center;

  background-color: #273ea8;

  color: white;

  border-radius: 50px;

  padding: 10px 15px;

  font-size: 12px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: background-color 0.3s ease;

}



.sepetcik-button:hover {

  background-color: #282e5a;

}



.sepetcik-icon {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  margin-right: 8px;

  object-fit: cover;

}



.sepetcik-badge {

  margin-left: auto;

  background: #FF3B3B;

  min-width: 20px;

  height: 20px;

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 6px;

}



.sepetsol {
  background-color: #ffffff5b;
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  margin-left: .9rem;
  font-size: 12px;
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px; /* Dikey ortalama için text-height ile aynı değeri kullanın */
  text-align: center;
  vertical-align: middle;
}



.ayinyazaridiv {

  background-color: #f8f9fa;

  padding: 2rem;

  border-radius: 12px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  margin-bottom: 2rem;

}



.ana-baslik {

  font-size: 1.5rem;

  font-weight: bold;

  color: #333;

  margin-bottom: 1.5rem;

  padding-bottom: 0.5rem;

  border-bottom: 2px solid #e0e0e0;

}



.yazar-container {

  display: flex;

  gap: 2rem;

  align-items: start;

}



.yazar-sol {

  display: flex;

  gap: 2rem;

  flex: 1.2; /* 2'den 1.2'ye düşürüldü */

}



.yazar-img-container {

  width: 160px; /* 180'den 160'a düşürüldü */

  height: 240px; /* 260'tan 240'a düşürüldü */

  overflow: hidden;

  border-radius: 8px;

  flex-shrink: 0;

}



.yazar-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.yazar-bilgi {

  flex: 1;

}



.yazar-adi {

  font-size: 1.3rem; /* Biraz küçültüldü */

  font-weight: bold;

  margin-bottom: 0.8rem;

  color: #333;

}



.yazar-aciklama {

  font-size: 0.85rem; /* Biraz küçültüldü */

  line-height: 1.5;

  color: #666666;

  margin-bottom: 1.5rem;

}



.yazar-kitaplar {

  flex: 1.5; /* 1'den 1.5'e çıkarıldı */

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

}



.kitap-card {

  background: white;

  padding: 0.8rem;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  text-align: center;

}



.kitap-img {

  width: 110px; /* 100'den 110'a çıkarıldı */

  height: 165px; /* 150'den 165'e çıkarıldı */

  object-fit: cover;

  margin-bottom: 0.8rem;

  border-radius: 4px;

}



.kitap-baslik {

  font-size: 0.8rem;

  font-weight: bold;

  color: #333;

  margin-bottom: 0.5rem;

}



.kitap-fiyat {

  color: #e63946;

  font-weight: bold;

  font-size: 0.9rem;

}



.kitap-yazar {

  font-size: 10px;

  color: #666;

  display: block;

  margin-bottom: 0.3rem;

}



@media (max-width: 992px) {

  .yazar-container {

      flex-direction: column;

  }

  

  .yazar-kitaplar {

      width: 100%;

  }

}



@media (max-width: 768px) {

  .yazar-sol {

      flex-direction: column;

      align-items: center;

      text-align: center;

  }

}



@media (max-width: 576px) {

  .ayinyazaridiv {

      padding: 1rem;

  }

  

  .ana-baslik {

      font-size: 1.3rem;

  }

  

  .yazar-adi {

      font-size: 1.2rem;

  }

  

  .kitap-img {

      width: 90px;

      height: 135px;

  }

}



.murekkepsi {

  position: relative;

}



.blogsi {

  font-size: 10px;

  position: absolute;

  top: -8px;

  right: -8px;

}



.mrlink {

  text-decoration: none;

  color: #000;

  padding: .4rem;

}



.mrlink:hover {

  color: #329c5e;

  background-color: #94f1bbc9;

  padding: .4rem;

}

:root {
    --okuyan-sali-primary: #ff6b6b;     /* Ana kırmızı ton */
    --okuyan-sali-secondary: #ff8e8e;   /* Daha açık kırmızı */
    --okuyan-sali-dark: #d63031;        /* Koyu kırmızı */
    --okuyan-sali-text: #2d3436;        /* Ana metin rengi */
    --okuyan-sali-accent: #ffeaa7;      /* Vurgu rengi */
    --okuyan-sali-bg: #ffffff;          /* Beyaz arka plan */
    --okuyan-sali-button: #e63946;      /* Daha canlı kırmızı buton */
}

.okuyan-sali-container {
    font-family: 'Poppins', sans-serif;
    color: var(--okuyan-sali-text);
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem;
}

.okuyan-sali-header-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.okuyan-sali-image-container {
    position: relative;
    display: inline-block;
}

.okuyan-sali-character-image {
    width: 170px;
    height: auto;
    position: absolute;
    left: -160px;
    bottom: -60px;
    z-index: 1;
}

.okuyan-sali-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 450px;
    height: auto;
}

.okuyan-sali-campaign-info {
    margin-bottom: 1rem;
}

.okuyan-sali-campaign-subtitle {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--okuyan-sali-dark);
    margin-bottom: 0.1rem;
    text-align: center;
    line-height: 1.3;
    background: linear-gradient(to right, var(--okuyan-sali-primary), var(--okuyan-sali-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.okuyan-sali-description {
    color: var(--okuyan-sali-text);
    text-align: center;
    margin-top: 0.3rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.okuyan-sali-countdown-container {
    margin-bottom: 1.5rem;
    text-align: center;
}

.okuyan-sali-countdown-timer {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}

.okuyan-sali-countdown-segment {
    background: linear-gradient(135deg, var(--okuyan-sali-primary), var(--okuyan-sali-dark));
    color: white;
    padding: 1rem;
    border-radius: 10px;
    min-width: 90px;
    text-align: center;
    box-shadow: 0 8px 15px rgba(214, 48, 49, 0.25);
    position: relative;
    overflow: hidden;
}

.okuyan-sali-countdown-segment::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-30deg);
    transition: 0.5s;
}

.okuyan-sali-countdown-segment:hover::before {
    left: 100%;
}

.okuyan-sali-countdown-number {
    font-size: 2.8rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 0.3rem;
}

.okuyan-sali-countdown-label {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.9;
}

.okuyan-sali-section-title {
    position: relative;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    color: var(--okuyan-sali-primary);
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: 1px;
}

.okuyan-sali-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--okuyan-sali-primary), var(--okuyan-sali-dark));
    border-radius: 2px;
}

.okuyan-sali-rules-section {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.okuyan-sali-rules-list {
    list-style-type: none;
    padding-left: 0;
    max-width: 80%;
    margin: 0 auto;
}

.okuyan-sali-rules-list li {
    margin-bottom: 0.8rem;
    padding-left: 2rem;
    position: relative;
    font-size: 0.8rem;
}

.okuyan-sali-rules-list li::before {
    content: "-";
    font-weight: 600;
    position: absolute;
    left: 0;
    color: var(--okuyan-sali-primary);
}

.okuyan-sali-book-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.okuyan-sali-book-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.okuyan-sali-book-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.okuyan-sali-book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.okuyan-sali-book-card:hover .okuyan-sali-book-image img {
    transform: scale(1.08);
}

.okuyan-sali-discount-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--okuyan-sali-primary), var(--okuyan-sali-dark));
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 3px 8px rgba(214, 48, 49, 0.3);
    z-index: 2;
}

.okuyan-sali-book-content {
    padding: 1.2rem;
}

.okuyan-sali-book-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    color: var(--okuyan-sali-text);
}

.okuyan-sali-book-author {
    color: var(--okuyan-sali-text);
    opacity: 0.7;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

.okuyan-sali-book-price {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.okuyan-sali-price-original {
    text-decoration: line-through;
    color: #999;
    margin-right: 0.8rem;
    font-size: 0.9rem;
}

.okuyan-sali-price-discounted {
    font-weight: 700;
    color: var(--okuyan-sali-primary);
    font-size: 1.3rem;
}

.okuyan-sali-stock-info {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    color: var(--okuyan-sali-text);
    opacity: 0.8;
}

.okuyan-sali-stock-number {
    color: var(--okuyan-sali-button);
    font-weight: 700;
}

.okuyan-sali-blink {
    animation: blinkAnimation 1.6s infinite;
}

@keyframes blinkAnimation {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.okuyan-sali-add-button {
    width: 100%;
    padding: 0.8rem;
    background: var(--okuyan-sali-button);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(230, 57, 70, 0.3);
}

.okuyan-sali-add-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: skewX(-30deg);
    transition: 0.5s;
}

.okuyan-sali-add-button:hover::before {
    left: 100%;
}

.okuyan-sali-add-button:hover {
    background: #d72638;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(230, 57, 70, 0.4);
}

/* Stok tükenmiş ürünler için stiller */
.okuyan-sali-sold-out .okuyan-sali-book-image {
    opacity: 0.7;
}

.okuyan-sali-sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(45, 52, 54, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.okuyan-sali-sold-out-overlay span {
    background-color: var(--okuyan-sali-dark);
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    transform: rotate(-15deg);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.okuyan-sali-sold-out-button {
    background: #95a5a6;
    cursor: not-allowed;
    box-shadow: none;
}

.okuyan-sali-sold-out-button:hover {
    background: #95a5a6;
    transform: none;
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .okuyan-sali-countdown-timer {
        flex-wrap: wrap;
    }
    
    .okuyan-sali-countdown-segment {
        min-width: 70px;
        padding: 0.8rem;
        margin-bottom: 0.8rem;
    }
    
    .okuyan-sali-countdown-number {
        font-size: 2rem;
    }
    
    .okuyan-sali-campaign-subtitle {
        font-size: 1.3rem;
    }
    
    .okuyan-sali-character-image {
        width: 120px;
        left: -100px;
        bottom: -20px;
    }
    
    .okuyan-sali-logo {
        max-width: 350px;
    }
    
    .okuyan-sali-rules-list {
        max-width: 100%;
    }
}

/* Nobel Sepet Modalı CSS */
.modal-dialog-right {
    margin-right: 0;
    margin-left: auto;
    max-width: 430px;
}

.nbsepet-header {
    border-bottom: 1px solid #eee;
    padding: 20px;
}

.nbsepet-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
}

.nbsepet-body {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.nbsepet-progress-section {
    position: relative;
    margin-bottom: 20px;
}

.nbsepet-progress-info {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #666;
}

.nbsepet-progress {
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.nbsepet-progress-bar {
    height: 100%;
    background-color: #28a745;
    border-radius: 4px;
    width: 0;
    transition: width 0.5s ease;
}

.nbsepet-progress-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

.nbsepet-progress-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nbsepet-points-container {
    margin-bottom: 20px;
}

.nbsepet-points {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #e8f4ff;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.nbsepet-points-icon {
    margin-right: 15px;
    font-size: 1.5rem;
    color: #007bff;
}

.nbsepet-points-info {
    flex: 1;
}

.nbsepet-points-info h6 {
    margin: 0 0 5px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.nbsepet-points-info small {
    font-size: 0.8rem;
    color: #666;
}

.nbsepet-corporate {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

.nbsepet-corporate-icon {
    margin-right: 15px;
    font-size: 1.5rem;
    color: #ff9800;
}

.nbsepet-corporate-info {
    flex: 1;
}

.nbsepet-corporate-info h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

.nbsepet-items {
    margin-bottom: 20px;
}

.nbsepet-empty {
    padding: 30px 0;
    text-align: center;
}

.nbsepet-empty-img {
    width: 100px;
    margin-bottom: 15px;
}

.nbsepet-empty-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.nbsepet-empty-text {
    color: #666;
    font-size: 0.9rem;
}

.nbsepet-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.nbsepet-item-image {
    width: 80px;
    height: 120px;
    margin-right: 15px;
}

.nbsepet-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.nbsepet-item-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.nbsepet-item-info {
    flex: 1;
    padding-right: 15px;
}

.nbsepet-product-title {
    margin: 0 0 5px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
}

.nbsepet-product-author {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: #666;
}

.nbsepet-quantity-controls {
    display: flex;
    align-items: center;
    max-width: 120px;
}

.nbsepet-minus-btn,
.nbsepet-plus-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.nbsepet-minus-btn {
    border-radius: 4px 0 0 4px;
}

.nbsepet-plus-btn {
    border-radius: 0 4px 4px 0;
}

.nbsepet-minus-btn:hover,
.nbsepet-plus-btn:hover {
    background-color: #e9ecef;
}

.nbsepet-quantity-input {
    width: 40px;
    height: 30px;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    text-align: center;
    font-size: 0.9rem;
}

.nbsepet-item-price {
    text-align: right;
    min-width: 80px;
}

.nbsepet-price {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.nbsepet-remove-link {
    font-size: 0.85rem;
    color: #dc3545;
    text-decoration: none;
}

.nbsepet-remove-link:hover {
    text-decoration: underline;
}

.nbsepet-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    flex-direction: column;
}

.nbsepet-summary {
    margin-bottom: 15px;
}

.nbsepet-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.nbsepet-summary-label {
    color: #666;
}

.nbsepet-summary-value {
    font-weight: 500;
}

.nbsepet-total-row {
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.nbsepet-actions {
    display: flex;
    gap: 10px;
}

.nbsepet-continue-btn {
    flex: 1;
    padding: 10px;
    background-color: transparent;
    border: 1px solid #333;
    color: #333;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
}

.nbsepet-checkout-btn {
    flex: 1;
    padding: 10px;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nbsepet-continue-btn:hover {
    background-color: #f8f9fa;
}

.nbsepet-checkout-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 576px) {
    .modal-dialog-right {
        max-width: 100%;
    }
    
    .nbsepet-item-image {
        width: 60px;
        height: 90px;
    }
    
    .nbsepet-quantity-controls {
        max-width: 100px;
    }
    
    .nbsepet-actions {
        flex-direction: column;
    }
}

.campanispan{
  background-color: #f8e85a;
  padding: .2rem;
  border-radius: 5px;
}

/* Kitap Listesi için Özel CSS - Diğer CSS'lerle çakışmaması için liste- ön eki kullanıldı */
.liste-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.liste-tab-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.liste-tab-buttons .btn {
  margin: 5px;
  font-weight: 500;
  border-radius: 4px;
  padding: 8px 20px;
  transition: all 0.3s;
}

.liste-btn-primary {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
  color: white;
}

.liste-btn-primary:hover,
.liste-btn-primary:focus,
.liste-btn-primary:active {
  background-color: #ff3838;
  border-color: #ff3838;
  color: white;
}

.liste-btn-outline {
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  background-color: transparent;
}

.liste-btn-outline:hover {
  background-color: #ffeeee;
  color: #ff6b6b;
}

.liste-badge {
  background-color: white;
  color: #ff6b6b;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 5px;
}

.liste-btn-primary .liste-badge {
  background-color: white;
  color: #ff6b6b;
}

.liste-btn-outline .liste-badge {
  background-color: #ff6b6b;
  color: white;
}

.liste-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
  flex-wrap: wrap;
  padding: 15px;
  border-radius: 5px;
}

.liste-search {
  flex-grow: 1;
  margin: 0 15px 10px 15px;
}

.liste-search .form-control {
  border-radius: 4px;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
}

.liste-search .form-control:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.15);
}

.liste-filter, .liste-export {
  position: relative;
  margin-bottom: 10px;
}

.liste-filter {
  min-width: 200px;
}

.liste-filter .form-select {
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.liste-filter .form-select:focus {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.15);
}

/* Özel dropdown stilleri */
.liste-dropdown {
  position: relative;
  display: inline-block;
}

.liste-dropdown-toggle {
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  background-color: white;
  color: #333;
  padding: 6px 12px;
  cursor: pointer;
}

.liste-dropdown-toggle:hover {
  background-color: #f8f8f8;
}

.liste-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 160px;
  z-index: 1000;
  padding: 5px 0;
  margin: 2px 0 0;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  border: 1px solid #e0e0e0;
  background-color: white;
}

.liste-dropdown-menu.liste-show {
  display: block;
}

.liste-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 15px;
  clear: both;
  font-weight: 400;
  color: #333;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}

.liste-dropdown-item:hover {
  color: #ff6b6b;
  background-color: #ffeeee;
  text-decoration: none;
}

.liste-dropdown-item i {
  margin-right: 8px;
}

.liste-item {
  margin-bottom: 25px;
  border: none;
  border-radius: 5px;
  padding: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.liste-item:hover {
  transform: translateY(-3px);
}

.liste-img-container {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  cursor: pointer;
  text-decoration: none;
}

.liste-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 3px;
  transition: transform 0.2s;
}

.liste-img:hover {
  transform: scale(1.05);
}

.liste-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 5px;
  color: #333;
}

.liste-author, .liste-publisher {
  color: #666;
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.liste-price {
  font-weight: 700;
  color: #ff4757;
  font-size: 1.2rem;
}

.liste-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.liste-buttons .btn {
  border-radius: 4px;
  padding: 8px 0;
  font-size: 0.8rem;
  transition: all 0.3s;
  width: 100%;
}

.liste-add-cart {
  background-color: #ff6b6b;
  border: none;
  color: white;
  font-weight: 500;
}

.liste-add-cart:hover {
  background-color: #ff3838;
}

.liste-remove {
  background-color: transparent;
  border: 1px solid #ff6b6b;
  color: #ff6b6b;
}

.liste-remove:hover {
  background-color: #ffeeee;
}

/* Responsive düzenlemeler */
@media (max-width: 992px) {
  .liste-toolbar {
      flex-direction: column;
      align-items: stretch;
  }
  
  .liste-search, .liste-filter, .liste-export {
      margin: 0 0 10px 0;
      width: 100%;
  }
}

@media (max-width: 768px) {
  .liste-tab-buttons {
      flex-direction: column;
      align-items: center;
  }
  
  .liste-tab-buttons .btn {
      width: 100%;
      margin: 3px 0;
  }
}

.listebtn-container {
  position: relative;
  display: inline-block;
}

/* Dropdown menünün pozisyonu */
.liste-dropdown {
  display: none;
  position: absolute;
  top: 100%; /* Butonun tam altından başlasın */
  left: 0;
  min-width: 160px;
  z-index: 1000;
  padding: 0.5rem 0;
  margin-top: 0.125rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.liste-dropdown.show {
  display: block;
}

.listebtn-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  text-align: left;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}

.listebtn-item:hover {
  background-color: #f8f9fa;
}

.detailed-search-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border-width: 2px;
  border-radius: 8px;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}

.detailed-search-btn:hover {
  background-color: rgba(220, 53, 69, 0.8); /* Red background */
  border-color: #dc3545;
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
  transform: translateY(-2px);
  color: white;
}

/* Left to right sweep effect - more pronounced */
.detailed-search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
              transparent, 
              rgba(255, 255, 255, 0.3) 50%, 
              transparent);
  transition: left 0.8s ease-in-out;
  z-index: 1;
}

.detailed-search-btn:hover::before {
  left: 100%;
}

.smile-icon {
  display: inline-block;
  animation: icon-rotate 3s linear infinite;
  position: relative;
  z-index: 2;
}

.highlight-text {
  animation: text-flash-red-black 1.5s infinite;
  position: relative;
  z-index: 2;
}

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

@keyframes text-flash-red-black {
  0%, 100% {
      color: #dc3545; /* Red */
      text-shadow: 0 0 3px rgba(220, 53, 69, 0.5);
  }
  50% {
      color: #fff; /* Black */
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }
}

/* detayli-arama.css - Gölgeler olmadan temiz stil */

/* Genel Konteyner Stili */
.detayli-arama {
  color: #333;
}

/* Sol Taraf - Filtreler */
.detayli-arama .filter-container {
  background-color: #fff;
  border-radius: 8px;
}

/* Arama istatistikleri */
.detayli-arama .search-stats h5 {
  font-size: 1rem;
  font-weight: 600;
}

/* Daima açık filtre bölümü */
.detayli-arama .filter-section {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #f8d7da;
}

.detayli-arama .filter-header {
  padding: 1rem;
  border-bottom: 1px solid #f8d7da;
}

.detayli-arama .filter-header h5 {
  margin: 0;
  color: #dc3545;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.detayli-arama .filter-body {
  padding: 1rem;
}

/* Accordion Stilleri */
.detayli-arama .custom-accordion {
  margin-top: 1.5rem;
}

.detayli-arama .accordion-item {
  border: 1px solid #eee;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
}

.detayli-arama .accordion-button {
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: #444;
  background-color: #fff;
  border: none;
}

.detayli-arama .accordion-button:not(.collapsed) {
  color: #dc3545;
  background-color: #fff;
  box-shadow: none;
}

.detayli-arama .accordion-button:focus {
  box-shadow: none;
  border: none;
}

.detayli-arama .accordion-button i {
  color: #dc3545;
  width: 20px;
}

.detayli-arama .accordion-button::after {
  background-size: 1rem;
  width: 1rem;
  height: 1rem;
  color: #dc3545;
}

.detayli-arama .accordion-body {
  padding: 1rem;
  background-color: #fff;
}

/* Form Kontrolleri */
.detayli-arama .form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #666;
  margin-bottom: 0.25rem;
}

.detayli-arama .form-control,
.detayli-arama .form-select {
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}

.detayli-arama .form-control:focus,
.detayli-arama .form-select:focus {
  border-color: #dc3545;
  box-shadow: none;
}

/* Butonlar */
.detayli-arama .filter-buttons {
  padding: 0 0.5rem;
}

.detayli-arama .btn-danger {
  background-color: #dc3545;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.detayli-arama .btn-danger:hover {
  background-color: #c82333;
}

.detayli-arama .btn-outline-secondary {
  border-color: #ddd;
  color: #666;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-weight: 500;
}

.detayli-arama .btn-outline-secondary:hover {
  background-color: #f8f9fa;
  color: #444;
}

/* Aktif Filtreler */
.detayli-arama .active-filters {
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #eee;
}

.detayli-arama .active-filters h6 {
  font-weight: 600;
  color: #555;
  margin-bottom: 0.75rem;
}

.detayli-arama .filter-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background-color: #f8d7da;
  color: #842029;
  border-radius: 4px;
  font-size: 0.8rem;
  margin: 0.25rem;
}

.detayli-arama .filter-badge i {
  margin-left: 0.5rem;
  cursor: pointer;
  color: #dc3545;
}

/* Sağ Taraf - Arama ve Sonuçlar */
.detayli-arama .search-container {
  margin-bottom: 1.5rem;
}

.detayli-arama .input-group {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.detayli-arama .input-group-text {
  background-color: #fff;
  color: #dc3545;
  margin-right: 1rem;
}

.detayli-arama .search-container .form-control {
  border-left: none;
  height: 45px;
  font-size: 1rem;
}

.detayli-arama .search-container small {
  font-size: 0.8rem;
  display: block;
  margin-top: 0.5rem;
}

/* Sonuç Sayısı ve Sıralama */
.detayli-arama .results-header {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.detayli-arama .result-count h5 {
  font-size: 1rem;
  color: #444;
  font-weight: 600;
}

.detayli-arama .sort-options select {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 0.35rem 2rem 0.35rem 0.75rem;
  font-size: 0.85rem;
  background-position: right 0.5rem center;
}

/* Fiyat Aralığı Slideri */
.detayli-arama .range-slider-container {
  padding: 0.5rem 0;
}

.detayli-arama .range-values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: #666;
}

.detayli-arama .form-range {
  height: 6px;
}

.detayli-arama .form-range::-webkit-slider-thumb {
  background-color: #dc3545;
}

.detayli-arama .form-range::-moz-range-thumb {
  background-color: #dc3545;
}

/* Sayfalama */
.detayli-arama .pagination {
  margin-top: 2rem;
}

.detayli-arama .page-link {
  color: #dc3545;
  border-color: #dee2e6;
}

.detayli-arama .page-item.active .page-link {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.detayli-arama .page-item:not(.active) .page-link:hover {
  background-color: #f8d7da;
  color: #dc3545;
}

/* Responsive Düzenlemeler */
@media (max-width: 991.98px) {
  .detayli-arama .filter-container {
      margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .detayli-arama .results-header .row {
      flex-direction: column;
  }
  
  .detayli-arama .sort-options {
      margin-top: 1rem;
      justify-content: flex-start !important;
  }
}

.detayli-arama .typewriter-container {
  display: inline-block;
  background-color: rgba(220, 53, 69, 0.05);
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid #dc3545;
  width: 100%;
  text-align: center;
}

.detayli-arama .typewriter-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #dc3545;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.detayli-arama .typewriter-text i {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.6;
  }
  100% {
      opacity: 1;
  }
}

/* Sayı vurgulama */
.detayli-arama .highlight-number {
  font-weight: 700;
  color: #b71c30;
}

.detayli-arama .search-icon {
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 5;
  font-size: 0.9rem;
}

.detayli-arama .search-container .form-control {
  height: 45px;
  font-size: 1rem;
  border-radius: 4px;
  padding-left: 2.5rem; /* 1rem = 16px, so 2.5rem is approximately icon + 1rem space */
  border: 1px solid #ddd;
}

.detayli-arama .range-slider {
  margin: 15px 0;
  position: relative;
}

.detayli-arama .slider-tooltip {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #dc3545;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.detayli-arama .form-range:hover + .slider-tooltip,
.detayli-arama .form-range:active + .slider-tooltip {
  opacity: 1;
}

/* Sepetsu Modern Cart CSS */
.sepetsu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1049;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sepetsu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sepetsu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 400px;
  max-width: 90vw;
  height: 100%;
  background-color: white;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  overflow: hidden;
}

.sepetsu-drawer.active {
  right: 0;
}

.sepetsu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e1e1e1;
}

.sepetsu-header h5 {
  margin: 0;
  font-weight: 600;
  color: #333;
}

.sepetsu-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  transition: color 0.2s ease;
}

.sepetsu-close-btn:hover {
  color: #e74c3c;
}

.sepetsu-progress-container {
  padding: 15px 20px;
  border-bottom: 1px solid #e1e1e1;
}

.sepetsu-free-shipping-info {
  margin: 0 0 10px;
  font-size: 12px;
  text-align: center;
}

.sepetsu-free-shipping-info span {
  color: #2ecc71;
  font-weight: 600;
}

.sepetsu-free-shipping-success {
  margin: 0 0 10px;
  font-size: 14px;
  text-align: center;
  color: #2ecc71;
  font-weight: 600;
}

.sepetsu-points, .sepetsu-corporate {
  margin-top: 15px;
  text-align: center;
  background-color: rgba(46, 204, 113, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.sepetsu-points h6, .sepetsu-corporate h6 {
  margin: 0 0 5px;
  font-size: 15px;
}

.sepetsu-points p {
  margin: 0;
  font-size: 12px;
  color: #777;
}

.sepetsu-items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 15px;
}

.sepetsu-empty {
  text-align: center;
  padding: 30px 20px;
}

.sepetsu-empty img {
  width: 80px;
  margin-bottom: 15px;
}

.sepetsu-empty h6 {
  margin: 0 0 5px;
  font-weight: 600;
}

.sepetsu-empty p {
  margin: 0;
  color: #777;
  font-size: 14px;
}

.sepetsu-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #e1e1e1;
  position: relative;
}

.sepetsu-item:last-child {
  border-bottom: none;
}

.sepetsu-item-image {
  width: 70px;
  margin-right: 15px;
}

.sepetsu-item-image img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sepetsu-item-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sepetsu-item-info {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.sepetsu-item-info h6 {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 600;
}

.sepetsu-author {
  margin: 0 0 3px;
  font-size: 12px;
  color: #555;
}

.sepetsu-publisher {
  margin: 0 0 5px;
  font-size: 12px;
  color: #777;
}

.sepetsu-item-price {
  font-weight: 600;
  color: #e74c3c;
  font-size: 15px;
  margin-top: 5px;
}

.sepetsu-item-side-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}

.sepetsu-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  width: 30px;
}

.sepetsu-quantity-btn {
  width: 30px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  padding: 0;
}

.sepetsu-quantity-btn.sepetsu-plus {
  border-top: 1px solid #e1e1e1;
}

.sepetsu-quantity-btn.sepetsu-minus {
  border-bottom: 1px solid #e1e1e1;
}

.sepetsu-quantity-btn:hover {
  background-color: #f5f5f5;
}

.sepetsu-quantity-input {
  width: 30px;
  height: 25px;
  text-align: center;
  border: none;
  font-size: 12px;
  background: transparent;
  padding: 0;
}

.sepetsu-remove-btn {
  background-color: #e74c3c;
  border: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 6px;
  border-radius: 4px;
  font-size: 10px; /* İkon boyutunu küçülttüm */
  width: 26px; /* Buton genişliğini küçülttüm */
  height: 26px; /* Buton yüksekliğini küçülttüm */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sepetsu-remove-btn i {
  font-size: 12px; /* İkon boyutunu özellikle küçültmek için */
}

.sepetsu-remove-btn:hover {
  background-color: #c0392b;
}

.sepetsu-footer {
  padding: 15px 20px;
  border-top: 1px solid #e1e1e1;
  background-color: #f8f9fa;
}

.sepetsu-summary {
  margin-bottom: 15px;
}

.sepetsu-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.sepetsu-total {
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #e1e1e1;
}

.sepetsu-buttons {
  display: flex;
  gap: 10px;
}

.sepetsu-continue-btn, .sepetsu-checkout-btn {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.sepetsu-continue-btn {
  background-color: white;
  border: 1px solid #e1e1e1;
  color: #333;
}

.sepetsu-continue-btn:hover {
  background-color: #f5f5f5;
}

.sepetsu-checkout-btn {
  background-color: #e74c3c;
  border: 1px solid #e74c3c;
  color: white;
}

.sepetsu-checkout-btn:hover {
  background-color: #c0392b;
  border-color: #c0392b;
}

/* Mobil uyumluluk için düzenlemeler */
@media (max-width: 576px) {
  .sepetsu-drawer {
    width: 100%;
  }
  
  .sepetsu-buttons {
    flex-direction: column;
  }
  
  .sepetsu-item-image {
    width: 60px;
  }
  
  .sepetsu-item-info {
    text-align: left;
  }
}

.custom-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.custom-tooltip i {
  color: #0d6efd;
}

.custom-tooltip .tooltip-text {
  visibility: hidden;
  width: 240px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -120px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.custom-tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.welcomekrm-greeting,
.welcomekrm-button-container,
.welcomekrm-slider-container {
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
}

/* Karşılama Mesajı */
.welcomekrm-greeting {
    background-color: #f8faff;
    border: 1px solid #e9effd;
    margin-top: 20px;
}

.welcomekrm-greeting-header h5 {
    color: #2c5cc5;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: -0.3px;
    position: relative;
    padding-bottom: 10px;
}

.welcomekrm-greeting-header h5:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #c7dbff;
}

.welcomekrm-greeting-content {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
}

.welcomekrm-greeting-content p {
    margin-bottom: 12px;
}

.welcomekrm-greeting-content b {
    color: #4b5563;
}

/* Container Alanı */
.welcomekrm-container {
    margin-top: 20px;
}

/* Buton Alanı */
.welcomekrm-button-container {
    background: linear-gradient(145deg, #eef4ff 0%, #f5f9ff 100%);
    border: 1px solid #e1ebfc;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Animasyonlu Başlık */
.welcomekrm-special-title-container {
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
}

.welcomekrm-special-title {
    color: #1e3a8a;
    display: inline-block;
    font-size: 1.2rem; /* Daha küçük font */
    position: relative;
    margin-bottom: 5px;
    animation: fontChange 10s infinite alternate ease-in-out;
}

@keyframes fontChange {
    0% {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    16.6% {
        font-family: 'Dancing Script', cursive;
        font-weight: 400;
        font-style: normal;
    }
    33.2% {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    49.8% {
        font-family: 'Pacifico', cursive;
        font-weight: 400;
        font-style: normal;
    }
    66.4% {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-style: italic;
    }
    83% {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    100% {
        font-family: 'Dancing Script', cursive;
        font-weight: 700;
        font-style: normal;
    }
}

.welcomekrm-special-title:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, rgba(58,134,255,0.2) 0%, rgba(58,134,255,1) 50%, rgba(58,134,255,0.2) 100%);
}

.welcomekrm-description {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.welcomekrm-cart-btn {
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
    width: 100%;
}

.welcomekrm-cart-btn:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.35);
}

.welcomekrm-btn-icon {
    background-color: rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.welcomekrm-btn-text {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Slider Alanı */
.welcomekrm-slider-container {
    background: linear-gradient(145deg, #fff7f8 0%, #fff9fa 100%);
    border: 1px solid #ffe6e9;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcomekrm-bulletin-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 10px;
    transition: all 0.3s ease;
    height: 300px; /* Yükseklik 300px olarak değiştirildi */
    border: 1px solid #ffebef;
}

.welcomekrm-bulletin-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.welcomekrm-bulletin-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0) 100%);
    padding: 15px;
    transition: all 0.3s ease;
}

.welcomekrm-bulletin-link {
    text-decoration: none;
}

.welcomekrm-bulletin-label {
    display: inline-block;
    background-color: #ffccd5;
    color: #e11d48;
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
    font-weight: 600;
}

.welcomekrm-bulletin-overlay h6 {
    color: #1f2937;
    font-weight: 600;
    margin: 0;
    font-size: 1rem;
}

.welcomekrm-bulletin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.welcomekrm-bulletin-card:hover img {
    transform: scale(1.05);
}

.welcomekrm-carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.welcomekrm-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffc2cf;
    border: none;
    margin: 0 4px;
    padding: 0;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.welcomekrm-indicator.active {
    opacity: 1;
    background-color: #e11d48;
    transform: scale(1.2);
}

/* Ekran boyutuna göre düzenlemeler */
@media (max-width: 992px) {
    .welcomekrm-tools, .welcomekrm-slider {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .welcomekrm-bulletin-card {
        height: 250px;
    }
}

/* Sadece mobil görünüm (992px altı) */
@media (max-width: 991.98px) {
  .mobilgizle {
    display: none !important;
  }
  
  .navbar-brand img {
    height: 40px;
  }
  
  #mobile-menu-toggle {
    display: block !important;
    background: none;
    border: none;
    font-size: 22px;
    color: #333;
    cursor: pointer;
    margin-left: auto;
    transition: color 0.2s ease;
    padding: 8px;
    border-radius: 50%;
  }
  
  #mobile-menu-toggle:hover {
    color: #dc3545;
  }
  
  #mobile-menu-toggle:focus {
    outline: none;
  }
  
  #mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background-color: rgba(20, 20, 20, 0.97);
    z-index: 2000;
    transition: left 0.3s ease;
    overflow-y: auto;
    backdrop-filter: blur(5px);
  }
  
  #mobile-menu:target {
    left: 0;
  }
  
  .nb-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .nb-scroll-text {
    overflow: hidden;
    white-space: nowrap;
    width: 80%;
  }
  
  .nb-scroll-text-inner {
    display: inline-block;
    animation: nb-text-scroll 15s linear infinite;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
  }
  
  @keyframes nb-text-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  
  .nb-menu-close {
    background: none;
    border: none;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
  }
  
  .nb-menu-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  
  .nb-menu-content {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
  }
  
  .nb-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 80%;
    max-width: 300px;
    text-align: center;
  }
  
  .nb-menu-list li {
    margin-bottom: 10px;
  }
  
  .nb-menu-list li a {
    display: block;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 400;
    transition: all 0.3s;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
  }
  
  .nb-menu-list li a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    transition: left 0.5s ease;
  }
  
  .nb-menu-list li a:hover:before {
    left: 100%;
  }
  
  .nb-menu-list li a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
  }
  
  .nb-menu-list li a.text-danger {
    color: #ff6b6b;
  }
  
  .nb-menu-list li a.text-danger:hover {
    color: #ff8a8a;
  }
  
  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* Masaüstü görünümünde mobil menü gizli olacak */
@media (min-width: 992px) {
  #mobile-menu, #mobile-menu-toggle {
    display: none !important;
  }
}

.sepethead-logo {
  max-height: 40px;
  transition: all 0.3s ease;
}

.sepethead-home-btn {
  font-size: 13px;
  height: 40px;
  padding: 0 20px;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.sepethead-home-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

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

.sepethead-icon {
  margin-right: 8px;
}

/* Responsive ayarlar */
@media (max-width: 576px) {
  .sepethead-logo {
      max-height: 36px;
  }
  
  .sepethead-home-btn {
      height: 36px;
      padding: 0 12px;
  }
  
  .sepethead-btn-text {
      display: none;
  }
  
  .sepethead-icon {
      margin-right: 0;
      font-size: 16px;
  }
}

/* Orta boyut ekranlar için */
@media (min-width: 577px) and (max-width: 767px) {
  .sepethead-logo {
      max-height: 36px;
  }
  
  .sepethead-home-btn {
      font-size: 12px;
  }
}

.sepetdetay-container {
  padding: 20px 0;
  font-family: 'Poppins', sans-serif;
}

.sepetdetay-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #d71e35;
  position: relative;
  padding-bottom: 10px;
}

.sepetdetay-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: #d71e35;
}

.sepetdetay-carousel {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}

.sepetdetay-carousel-inner {
  display: flex;
  transition: transform 0.5s ease;
  padding: 10px 0;
}

.sepetdetay-carousel-item {
  min-width: 180px; /* Daha küçük boyut */
  margin-right: 15px;
  flex-shrink: 0;
}

.sepetdetay-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: white;
  color: #d71e35;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.sepetdetay-nav-btn:hover {
  background-color: #d71e35;
  color: white;
  opacity: 1;
}

.sepetdetay-nav-prev {
  left: 10px;
}

.sepetdetay-nav-next {
  right: 10px;
}

.sepetdetay-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.07);
  background-color: white;
  transition: all 0.3s ease;
  height: 100%;
  border: none;
  position: relative;
}

.sepetdetay-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(215, 30, 53, 0.15);
}

.sepetdetay-card-img {
  height: 140px; /* Daha küçük görsel */
  object-fit: cover;
  transition: all 0.3s ease;
}

.sepetdetay-card:hover .sepetdetay-card-img {
  transform: scale(1.05);
}

.sepetdetay-discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #d71e35;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  z-index: 1;
}

.sepetdetay-card-body {
  padding: 12px;
}

.sepetdetay-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  color: #333;
}

.sepetdetay-card-author {
  font-size: 12px;
  color: #666;
  margin-bottom: 3px;
}

.sepetdetay-card-publisher {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}

.sepetdetay-price {
  font-weight: 700;
  color: #d71e35;
  font-size: 16px;
}

.sepetdetay-old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 13px;
  margin-left: 5px;
}

.sepetdetay-add-btn {
  background-color: #d71e35;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sepetdetay-add-btn:hover {
  background-color: #b31628;
  transform: scale(1.05);
}

.sepetdetay-add-btn i {
  margin-right: 3px;
}

.sepetdetay-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 20px;
}

.sepetdetay-cart-item {
  padding: 15px 0;
  border-bottom: 1px solid #f1f1f1;
  transition: all 0.3s ease;
}

.sepetdetay-cart-item:last-child {
  border-bottom: none;
}

.sepetdetay-product-img {
  width: 80px;
  height: 110px;
  object-fit: cover;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.sepetdetay-quantity-input {
  width: 40px;
  text-align: center;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 4px;
  font-size: 14px;
}

.sepetdetay-quantity-btn {
  background: white;
  border: 1px solid #e4e4e4;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 12px;
}

.sepetdetay-quantity-btn:hover {
  background-color: #f5f5f5;
}

.sepetdetay-remove-btn {
  color: #999;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sepetdetay-remove-btn:hover {
  color: #d71e35;
}

.sepetdetay-btn-primary {
  background-color: #d71e35;
  border: none;
  color: white;
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 15px;
}

.sepetdetay-btn-primary:hover {
  background-color: #b31628;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(215, 30, 53, 0.2);
}

.sepetdetay-btn-outline {
  background-color: white;
  border: 1px solid #d71e35;
  color: #d71e35;
  padding: 12px 20px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 15px;
}

.sepetdetay-btn-outline:hover {
  background-color: #f9f9f9;
  color: #b31628;
  border-color: #b31628;
}

.sepetdetay-summary-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.sepetdetay-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.sepetdetay-summary-total {
  font-size: 20px;
  font-weight: 700;
  color: #d71e35;
  text-align: right;
}

.sepetdetay-cart-header {
  font-weight: 600;
  color: #666;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
}

.sepetdetay-product-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}

.sepetdetay-product-author {
  color: #666;
  font-size: 13px;
  margin-bottom: 3px;
}

.sepetdetay-product-publisher {
  color: #888;
  font-size: 12px;
}

/* Animasyonlar */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.sepetdetay-animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes pulse {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.03);
  }
  100% {
      transform: scale(1);
  }
}

.sepetdetay-pulse {
  animation: pulse 2s infinite;
}

.sepetdetay-delay-1 {
  animation-delay: 0.1s;
}

.sepetdetay-delay-2 {
  animation-delay: 0.2s;
}

.sepetdetay-delay-3 {
  animation-delay: 0.3s;
}

.sepetdetay-empty-message {
  text-align: center;
  padding: 30px 0;
  color: #666;
}

.sepetdetay-empty-icon {
  color: #e0e0e0;
  font-size: 50px;
  margin-bottom: 15px;
}

/* Özel indirimlerin bulunduğu banner */
.sepetdetay-special-banner {
  background: linear-gradient(135deg, #ff4757 0%, #d71e35 100%);
  border-radius: 8px;
  padding: 15px 20px 15px 80px; /* Sol padding arttırıldı el animasyonu için */
  margin-bottom: 30px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(215, 30, 53, 0.2);
}

.sepetdetay-special-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}

.sepetdetay-special-text {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.sepetdetay-waving-hand {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: 50px;
  height: 50px;
  z-index: 1;
}

.kargo-bilgi-banner {
  text-align: center;
  background-color: rgba(46, 204, 113, 0.1);
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}

.kargo-bilgi-icon {
  color: #2ecc71;
  margin-right: 8px;
  font-size: 18px;
}

.kargo-bilgi-text {
  color: #27ae60;
  font-weight: 500;
}

.sepetjo-coupon-wrapper {
  position: relative;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.sepetjo-coupon-wrapper:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.sepetjo-coupon-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sepetjo-input {
  flex: 1;
  border: 1px solid #dee2e6;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  transition: border 0.3s ease;
  outline: none;
}

.sepetjo-input:focus {
  border-color: #6610f2;
  box-shadow: 0 0 0 3px rgba(102, 16, 242, 0.1);
}

.sepetjo-button {
  background-color: #000;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 500;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-size: 12px;
}

.sepetjo-button:hover {
  background-color: #520dc2;
}

.sepetjo-message {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
}

/* Nobel Puan Alanı Stilleri */
.sepetjo-points-wrapper {
  position: relative;
  margin-top: 15px;
}

.sepetjo-points-card {
  background-color: #f8f9fa;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sepetjo-points-header {
  background: linear-gradient(135deg, #6610f2, #7c4dff);
  color: white;
  padding: 15px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sepetjo-coins-icon {
  font-size: 24px;
  color: #ffd700;
  margin-bottom: 10px;
}

.sepetjo-points-info {
  font-size: 15px;
  line-height: 1.4;
}

.sepetjo-points-body {
  padding: 15px;
}

.sepetjo-points-max {
  font-size: 14px;
  margin-bottom: 15px;
  text-align: center;
  color: #6c757d;
}

.sepetjo-points-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sepetjo-currency {
  background-color: #e9ecef;
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: 500;
  color: #495057;
}

/* Input için özel stiller */
#sepetdetay-points-input {
  text-align: right;
}

/* Mesaj stilleri */
#sepetdetay-points-message.sepetjo-message.text-success {
  color: #28a745;
}

#sepetdetay-points-message.sepetjo-message.text-danger {
  color: #dc3545;
}

.sepetjo-points-toggle {
  cursor: pointer;
  font-size: 12px;
  color: #ffff;
  text-decoration: underline;
}

/* Modal overlay */
.payment-redirect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Modal content */
.payment-redirect-modal {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 90%;
  width: 400px;
}

/* Modal title */
.payment-redirect-title {
  font-size: 22px;
  margin-bottom: 15px;
  color: #333;
}

/* Modal text */
.payment-redirect-text {
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
}

/* Spinner animation */
.payment-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

.sepetfiltre-select {
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  background-color: white;
  width: 100%;
}

.sepetfiltre-label {
  font-size: 12px;
  font-weight: 500;
  color: #444;
  margin-bottom: 4px;
  display: block;
}

.sepetfiltre-btn {
  background-color: #e53935;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 6px;
  transition: background-color 0.2s;
  width: 100%;
}

.sepetfiltre-btn:hover {
  background-color: #c62828;
}


.sipdetay-container {
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.sipdetay-header {
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.sipdetay-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.sipdetay-content {
    padding: 0;
}

/* Adres bilgileri için grid düzeni */
.sipdetay-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sipdetay-section {
    padding: 20px 25px;
    position: relative;
    border-bottom: 1px solid #eee;
}

.sipdetay-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #e53935;
    margin-bottom: 14px;
    text-align: center;
    display: block;
}

.sipdetay-adres {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

.sipdetay-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.sipdetay-info-item {
    margin-bottom: 15px;
    text-align: center;
}

.sipdetay-info-label {
    font-size: 13px;
    color: #777;
    margin-bottom: 4px;
}

.sipdetay-info-value {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.sipdetay-toplam {
    grid-column: span 4;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.sipdetay-toplam .sipdetay-info-value {
    font-weight: 700;
    color: #e53935;
    font-size: 16px;
}

@media (max-width: 768px) {
    .sipdetay-addresses {
        grid-template-columns: 1fr;
    }
    
    .sipdetay-addresses .sipdetay-section:first-child {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    
    .sipdetay-info-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .sipdetay-toplam {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .sipdetay-info-grid {
        grid-template-columns: 1fr;
    }
    
    .sipdetay-toplam {
        grid-column: span 1;
    }
}

.sepdet-product-container {
  position: relative;
}

.sepdet-product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sepdet-quantity-badge {
  position: absolute;
  top: 1px;
  right: 10px;
  background-color: rgba(128, 128, 128, 0.8);
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  z-index: 2;
}

.sipdet-review-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.sipdet-review-btn {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid #333;
  color: #333;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 3px;
}

.sipdet-review-btn:hover {
  border-color: #e53935;
  color: #e53935;
}

.sipdet-review-btn i {
  margin-right: 5px;
  font-size: 11px;
}

.sipdet-scroll-container {
  width: 100%;
  overflow: hidden;
  height: 13px;
  position: relative;
}

.sipdet-scroll-text {
  position: absolute;
  white-space: nowrap;
  color: #e53935;
  font-weight: 500;
  font-size: 9px;
  animation: sipdet-scroll-below 8s linear infinite;
  transform: translateX(100%);
}

@keyframes sipdet-scroll-below {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.hesapdet-mobil-profil {
  display: none; /* Varsayılan olarak gizli, sadece mobilde gösterilecek */
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.hesapdet-profil-bilgi {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  text-align: center;
}

.hesapdet-avatar-container {
  position: relative;
  margin-bottom: 12px;
}

.hesapdet-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}

.hesapdet-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,0.9);
  border: 1px solid #eee;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  color: #555;
  font-size: 10px;
}

.hesapdet-user-info {
  width: 100%;
}

.hesapdet-user-name {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

.hesapdet-user-email {
  font-size: 12px;
  font-weight: 300;
  color: #666;
  margin: 3px 0;
}

.hesapdet-user-type {
  font-size: 12px;
  font-weight: 500;
  color: #e53935;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hesapdet-user-type i {
  margin-right: 4px;
}

.hesapdet-user-company {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  margin-top: 2px;
}

/* Kayan menü */
.hesapdet-scroll-menu {
  overflow-x: auto;
  white-space: nowrap;
  padding: 5px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.hesapdet-scroll-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.hesapdet-menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  height: 36px;
  padding: 0 15px;
  margin-right: 10px;
  background-color: #f8f8f8;
  border-radius: 18px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.hesapdet-menu-item:last-child {
  margin-right: 5px;
}

.hesapdet-menu-item:hover {
  background-color: #f0f0f0;
  color: #e53935;
  border-color: #e0e0e0;
}

.hesapdet-menu-item.active {
  background-color: #e53935;
  color: white;
  border-color: #e53935;
}

/* Sadece mobil cihazlarda göster */
@media (max-width: 768px) {
  .hesapdet-mobil-profil {
    display: block;
  }
}

.destekdet-container {
  width: 100%;
  margin-top: 2rem;
}

.destekdet-title {
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #333;
  position: relative;
  padding-bottom: 0.5rem;
}

.destekdet-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #e53935;
}

/* Desktop table styling */
.destekdet-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.destekdet-table th {
  background-color: #f8f8f8;
  color: #555;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.destekdet-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  font-size: 14px;
  vertical-align: middle;
}

.destekdet-table tr:last-child td {
  border-bottom: none;
}

.destekdet-table tr:hover {
  background-color: #fafafa;
}

/* Status badges */
.destekdet-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.destekdet-status-closed {
  background-color: #f5f5f5;
  color: #777;
}

.destekdet-status-review {
  background-color: #fff8e1;
  color: #ffa000;
}

.destekdet-status-answered {
  background-color: #e8f5e9;
  color: #4caf50;
}

/* View button */
.destekdet-view-link {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.destekdet-view-link:hover {
  background-color: #e0e0e0;
  text-decoration: none;
}

/* Mobile cards styling */
.destekdet-cards {
  display: none;
}

.destekdet-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 16px;
  margin-bottom: 16px;
}

.destekdet-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.destekdet-card-subject {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.destekdet-card-content {
  margin-bottom: 12px;
}

.destekdet-card-row {
  display: flex;
  margin-bottom: 8px;
}

.destekdet-card-label {
  width: 100px;
  font-size: 13px;
  color: #777;
}

.destekdet-card-value {
  flex: 1;
  font-size: 13px;
  color: #333;
}

.destekdet-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.destekdet-card-date {
  font-size: 12px;
  color: #777;
}

.destekdet-empty {
  text-align: center;
  padding: 30px;
  color: #777;
  background-color: #fafafa;
  border-radius: 8px;
  font-size: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
  .destekdet-table {
    display: none;
  }
  
  .destekdet-cards {
    display: block;
  }
}

.topludet-bulk-cart {
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.topludet-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.topludet-page-desc {
  color: #666;
  margin-bottom: 0;
}

.topludet-add-cart-btn {
  background-color: #e53935;
  color: white;
  font-weight: 500;
  transition: all 0.2s;
}

.topludet-add-cart-btn:hover {
  background-color: #c62828;
  color: white;
}

.topludet-add-cart-btn:disabled {
  background-color: #e57373;
  cursor: not-allowed;
}

.topludet-success-btn {
  background-color: #4caf50;
  color: white;
  font-weight: 500;
}

.topludet-success-btn:hover {
  background-color: #388e3c;
  color: white;
}

.topludet-progress {
  height: 20px;
}

.topludet-progress-bar {
  background-color: #e53935;
}

.topludet-file-input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.topludet-modal-close {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  background: transparent;
  border: 0;
}

.topludet-modal-close:hover {
  opacity: .75;
}

.topludet-file-wrapper {
  position: relative;
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden; /* Önemli: input için taşmaları önler */
}

.topludet-file-wrapper:hover {
  border-color: #999;
  background-color: #f2f2f2;
}

.topludet-file-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2; /* Input'un üstte kalması için */
}

.topludet-file-label {
  font-weight: 500;
  color: #555;
  margin-bottom: 8px;
  display: block;
}

.topludet-file-message {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.topludet-file-icon {
  font-size: 24px;
  color: #999;
  margin-bottom: 10px;
  display: block;
}

.topludet-file-name {
  font-size: 13px;
  font-weight: 500;
  color: #e53935;
  margin-top: 10px;
  word-break: break-word;
  display: none;
}

.topludet-file-name.active {
  display: block;
}

.password-strength-meter {
  height: 5px;
  width: 100%;
  display: flex;
  gap: 5px;
  margin-bottom: .5rem;
}

.strength-bar {
  height: 100%;
  flex: 1;
  background-color: #ddd;
  transition: background-color 0.3s ease;
}

.strength-bar.weak {
  background-color: #ff4d4d;
}

.strength-bar.medium {
  background-color: #ffbd4d;
}

.strength-bar.strong {
  background-color: #82c91e;
}

.strength-bar.very-strong {
  background-color: #2fb344;
}

.password-warning {
  font-size: 12px;
  color: #ff4d4d;
  display: none;  /* Varsayılan olarak gizli */
  margin-bottom: .5rem;
}

.hatasayfa {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff5f5;
  color: #333;
  position: relative;
  overflow: hidden;
}

/* Arka plan animasyonu */
.hatasayfa-bg-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hatasayfa-bg-anim span {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background: rgba(220, 20, 60, 0.05);
  border-radius: 50%;
  animation: move 8s linear infinite;
}

.hatasayfa-bg-anim span:nth-child(1) {
  top: 20%;
  left: 10%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  animation-duration: 20s;
}

.hatasayfa-bg-anim span:nth-child(2) {
  top: 60%;
  left: 70%;
  width: 50px;
  height: 50px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.hatasayfa-bg-anim span:nth-child(3) {
  top: 30%;
  left: 80%;
  width: 100px;
  height: 100px;
  animation-delay: 4s;
  animation-duration: 18s;
}

.hatasayfa-bg-anim span:nth-child(4) {
  top: 80%;
  left: 20%;
  width: 40px;
  height: 40px;
  animation-delay: 6s;
  animation-duration: 15s;
}

.hatasayfa-bg-anim span:nth-child(5) {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  animation-delay: 8s;
  animation-duration: 24s;
}

@keyframes move {
  0% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0.3;
      border-radius: 50%;
  }
  25% {
      opacity: 0.5;
  }
  50% {
      border-radius: 30%;
  }
  75% {
      opacity: 0.3;
  }
  100% {
      transform: translate(300px, 300px) rotate(360deg);
      opacity: 0;
      border-radius: 50%;
  }
}

.hatasayfa-container {
  display: flex;
  width: 90%;
  max-width: 1000px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(220, 20, 60, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hatasayfa-resim-alani {
  flex: 0 0 40%;
  background-color: #ffebee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.hatasayfa-resim-alani::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 99, 71, 0.1) 0%, rgba(220, 20, 60, 0.2) 100%);
}

.hatasayfa-resim-metin {
  color: #c62828;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 1rem;
  border: 2px dashed #ffcdd2;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.7);
}

.hatasayfa-icerik {
  flex: 0 0 60%;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hatasayfa-baslik {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
  color: #c62828;
  position: relative;
  display: inline-block;
}

.hatasayfa-mesaj {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  width: 100%;
}

.hatasayfa-hr {
  width: 80%;
  height: 1px;
  margin: 1.5rem 0;
  position: relative;
  background: none;
  border: none;
}

.hatasayfa-hr::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffcdd2, transparent);
}

.hatasayfa-hr::before {
  content: "👋🏻"; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  background: white;
  padding: 0 15px;
  z-index: 1;
}

.hatasayfa-btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.hatasayfa-btn {
  background-color: #c62828;
  color: white;
  border: none;
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(211, 47, 47, 0.15);
}

.hatasayfa-btn i {
  margin-right: 6px;
}

.hatasayfa-btn:hover {
  background-color: #b71c1c;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(211, 47, 47, 0.25);
}

.hatasayfa-btn-outline {
  background-color: transparent;
  color: #c62828;
  border: 1px solid #c62828;
}

.hatasayfa-btn-outline:hover {
  background-color: #fff5f5;
}

.hatasayfa-quote {
  color: #c62828;
  font-size: 1rem;
  margin: 1.5rem 0;
  width: 100%;
  position: relative;
  line-height: 1.6;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hatasayfa-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: #c62828;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s infinite;
}

@media (max-width: 992px) {
  .hatasayfa-container {
      flex-direction: column;
      width: 95%;
      max-width: 600px;
  }

  .hatasayfa-resim-alani, .hatasayfa-icerik {
      flex: 0 0 auto;
      width: 100%;
  }

  .hatasayfa-resim-alani {
      min-height: 200px;
  }

  .hatasayfa-icerik {
      padding: 2rem;
  }

  .hatasayfa-baslik {
      font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .hatasayfa-icerik {
      padding: 1.5rem;
  }

  .hatasayfa-baslik {
      font-size: 1.8rem;
  }

  .hatasayfa-quote {
      font-size: 0.9rem;
  }
  
  .hatasayfa-btn-group {
      flex-direction: column;
      width: 100%;
  }
  
  .hatasayfa-btn {
      width: 100%;
      justify-content: center;
  }
}

/* sifredegis- özel CSS sınıfları - çakışmaları önlemek için */
.sifredegis-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.sifredegis-title {
  color: #2c3e50;
  margin-bottom: 25px;
  font-weight: 600;
}

.sifredegis-form {
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sifredegis-input-group {
  margin-bottom: 20px;
}

.sifredegis-label {
  display: block;
  margin-bottom: 8px;
  color: #495057;
  font-weight: 500;
}

.sifredegis-input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.15s ease-in-out;
}

.sifredegis-input:focus {
  border-color: #4e73df;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.sifredegis-input.error {
  border-color: #e74a3b;
}

.sifredegis-error-message {
  color: #e74a3b;
  font-size: 14px;
  margin-top: 5px;
  display: none;
}

.sifredegis-error-message.show {
  display: block;
}

.sifredegis-requirements {
  margin: 10px 0 20px;
  font-size: 14px;
  color: #6c757d;
}

.sifredegis-btn {
  background-color: #4e73df;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.sifredegis-btn:hover {
  background-color: #2e59d9;
}

.sifredegis-btn:disabled {
  background-color: #b7becc;
  cursor: not-allowed;
}

/* Şifre güçlüğü göstergesi */
.sifredegis-strength-meter {
  height: 5px;
  margin-top: 10px;
  border-radius: 3px;
  background-color: #e9ecef;
}

.sifredegis-strength-meter-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  width: 0;
}

.sifredegis-strength-text {
  font-size: 14px;
  margin-top: 5px;
}

/* Şifre güçlüğü seviyelerine göre renkler */
.strength-weak { background-color: #e74a3b; }
.strength-medium { background-color: #f6c23e; }
.strength-strong { background-color: #1cc88a; }

/* ödeme- önekli özel CSS sınıfları - çakışmaları önlemek için */
.odeme-hediye-section {
  width: 100%;
  margin: 25px 0;
  padding: 0;
}

.odeme-hediye-accordion {
  background: linear-gradient(135deg, #f6d8ff 0%, #f2c1e0 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(157, 115, 183, 0.15);
  transition: all 0.3s ease;
  margin-bottom: 25px;
}

.odeme-hediye-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-hediye-header:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.odeme-hediye-title-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.odeme-hediye-title {
  color: #8a2be2;
  margin: 0;
  font-weight: 600;
  font-size: 18px;
}

.odeme-hediye-description {
  color: #7e57c2;
  margin: 0;
  font-size: 14px;
}

.odeme-hediye-emoji {
  font-size: 24px;
  margin-right: 5px;
}

.odeme-hediye-toggle {
  color: #8a2be2;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.odeme-hediye-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background-color: #fff;
}

.odeme-hediye-content-inner {
  padding: 20px;
}

.odeme-hediye-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.odeme-hediye-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  gap: 15px;
  padding: 5px 0;
}

.odeme-hediye-item {
  min-width: 160px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  position: relative;
}

.odeme-hediye-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 7px 15px rgba(138, 43, 226, 0.15);
}

.odeme-hediye-item.selected {
  border-color: #8a2be2;
  background-color: #faf5ff;
}

.odeme-hediye-item.selected::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #8a2be2;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.odeme-hediye-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.odeme-hediye-info {
  display: flex;
  flex-direction: column;
}

.odeme-hediye-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
  color: #6a1b9a;
  display: flex;
  align-items: center;
  gap: 5px;
}

.odeme-hediye-price {
  font-weight: 700;
  font-size: 14px;
  color: #8a2be2;
}

.odeme-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 2px 10px rgba(138, 43, 226, 0.2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s ease;
}

.odeme-nav-button:hover {
  background-color: #f6f0ff;
  box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
}

.odeme-prev-button {
  left: -5px;
}

.odeme-next-button {
  right: -5px;
}

.odeme-nav-icon {
  width: 20px;
  height: 20px;
  fill: #8a2be2;
}

.odeme-hediye-note-container {
  margin-top: 25px;
  width: 100%;
  background-color: #f9f4ff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(138, 43, 226, 0.1);
}

.odeme-hediye-note-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 10px;
  color: #6a1b9a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.odeme-hediye-note-input {
  width: 100%;
  min-height: 100px;
  padding: 15px;
  border: 1px solid #e2d5f0;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.15s ease-in-out;
  background-color: #fff;
}

.odeme-hediye-note-input:focus {
  border-color: #8a2be2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(138, 43, 226, 0.2);
}

.odeme-hediye-note-counter {
  display: block;
  margin-top: 5px;
  text-align: right;
  font-size: 12px;
  color: #9575cd;
}

.odeme-hediye-note-example {
  font-size: 13px;
  color: #7e57c2;
  margin-top: 10px;
  font-style: italic;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  border-radius: 8px;
  border-left: 3px solid #b39ddb;
}

.odeme-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #ff5d8f;
  color: white;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 10px;
  font-weight: bold;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Mobil responsive ayarlamalar */
@media (max-width: 768px) {
  .odeme-hediye-item {
      min-width: 140px;
      padding: 10px;
  }
  
  .odeme-hediye-image {
      height: 80px;
  }
}

.yorummodal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.yorummodal-container {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.yorummodal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.yorummodal-header h4 {
  margin: 0;
  font-weight: 600;
}

.yorummodal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #888;
}

.yorummodal-body {
  padding: 20px;
}

.yorummodal-rating {
  text-align: center;
  margin-bottom: 20px;
}

.yorummodal-emojis {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
}

.yorummodal-emoji {
  font-size: 32px;
  cursor: pointer;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0.5;
}

.yorummodal-emoji:hover {
  transform: scale(1.2);
}

.yorummodal-emoji.selected {
  opacity: 1;
  transform: scale(1.2);
}

.yorummodal-comment textarea {
  width: 100%;
  height: 120px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}

.yorummodal-footer {
  padding: 15px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #eee;
}

/* Toast mesaj stilleri */
.yorummodal-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0;
  z-index: 1100;
  max-width: 350px;
  overflow: hidden;
}

.yorummodal-toast-content {
  display: flex;
  align-items: center;
  padding: 15px;
}

.yorummodal-toast-icon {
  color: #4caf50;
  font-size: 24px;
  margin-right: 12px;
  flex-shrink: 0;
}

.yorummodal-toast-message {
  font-size: 14px;
  color: #333;
}

[class^="kapinsmail-"] {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .kapinsmail-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .kapinsmail-header {
            padding: 25px;
            text-align: center;
        }
        
        .kapinsmail-logo {
            max-width: 280px;
        }
        
        .kapinsmail-success-icon {
            margin: 20px auto;
            width: 80px;
            height: 80px;
            background-color: #42CD85;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .kapinsmail-heading {
            color: #333333;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .kapinsmail-body {
            padding: 30px;
            background-color: #ffffff;
        }
        
        .kapinsmail-order-details {
            background-color: #F8F8F8;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 25px;
        }
        
        .kapinsmail-detail-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #EEEEEE;
        }
        
        .kapinsmail-detail-row:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .kapinsmail-label {
            color: #666666;
            font-weight: bold;
        }
        
        .kapinsmail-value {
            color: #333333;
            font-weight: bold;
        }
        
        .kapinsmail-highlight {
            color: #4A2882;
        }
        
        .kapinsmail-payment-notice {
            background-color: #FFF9E6;
            border-left: 4px solid #FFC107;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 4px;
        }
        
        .kapinsmail-message {
            color: #555555;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        
        .kapinsmail-steps {
            margin-bottom: 25px;
        }
        
        .kapinsmail-step {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .kapinsmail-step-number {
            background-color: #4A2882;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .kapinsmail-step-text {
            color: #555555;
        }
        
        .kapinsmail-cta {
            text-align: center;
            margin: 30px 0;
        }
        
        .kapinsmail-button {
            background-color: #4A2882;
            color: white;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            display: inline-block;
        }
        
        .kapinsmail-footer {
            background-color: #F8F8F8;
            padding: 20px;
            text-align: center;
        }
        
        .kapinsmail-social {
            margin-bottom: 15px;
        }
        
        .kapinsmail-social-icon {
            display: inline-block;
            margin: 0 8px;
        }
        
        .kapinsmail-copyright {
            color: #888888;
            font-size: 12px;
        }
        
        @media only screen and (max-width: 600px) {
            .kapinsmail-body {
                padding: 20px;
            }
            
            .kapinsmail-heading {
                font-size: 20px;
            }
        }

        @media (max-width: 991.98px) {
          /* Ana container'a flexbox özelliği ekle */
          .detayli-arama .row {
              display: flex;
          }
          
          /* Sol taraf (filtreler) - en alta taşı */
          .detayli-arama .col-lg-4 {
              order: 2;
          }
          
          /* Sağ taraf (arama sonuçları) - en üste taşı */
          .detayli-arama .col-lg-8 {
              order: 1;
          }
      }