/* Ana Tema Rengi */
:root {
    --milagözluk-color: #432d9c;
    --milagozluk-color-rgb: rgba(67, 45, 156, 0.5);
    --beyaz: #fff;
    --siyah: #333;
    --acik-gri: #dee2e6;
    --mavimsi-gri: #aab7cf;
    --morumsu-gri: #f2f3f3;
    --koyu-gri: #343a40;
    --orta-koyu-gri: #6c757d;
    --cok-acik-gri: #f8f9fa;
}
body, h1, h2, h3, h4, h5, h6,
p, a, span, div, input, button, textarea {
  font-family: 'Poppins', sans-serif !important;
}

.user-icon,
.cart-icon,
.search-icon {
  color: var(--milagözluk-color);
  transition: color 0.2s;
}

.user-icon:hover,
.cart-icon:hover,
.search-icon:hover {
  color: #000;
}

.login-link {
  color: var(--milagözluk-color);
  font-weight: 500;
}

.login-link:hover {
  text-decoration: none;
  color: #000;
}

/* ================================================================ */
/* GENEL VE MASAÜSTÜ İÇİN HEADER STİLLERİ (Mevcut stillerinizden türetildi) */
/* ================================================================ */

.cart-link {
  display: flex;
  align-items: center;
}

#search-results a:hover {
  background-color: #f8f9fa;
}

.milagozluk-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 1050; /* Diğer elementlerin üzerinde kalmasını sağlar */
  height: 70px; /* Sabit bir yükseklik veriyoruz */
  display: flex; /* İçindeki container'ı hizalamak için */
  align-items: center; /* Dikeyde ortalamak için */
}

.milagozluk-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo sola, user-cart-wrapper sağa */
  flex-wrap: nowrap; /* Sarmalamayı engelle */
  padding: 10px 15px; /* Mevcut padding'i koru */
  gap: 10px; /* Elemanlar arası boşluk */
  height: 100%; /* Header yüksekliğini koru */
}

.logo-inside-zoom {
  max-height: 30px;
}
.user-cart-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap; /* Tek satırda kalmasını sağla */
}

/* User-cart-wrapper içindeki özel link/buton stilleri (Masaüstü için) */
.user-cart-wrapper .login-link {
  font-size: 1rem;
  color: #333;
  transition: color 0.3s ease;
}
.user-cart-wrapper .login-link:hover {
  color: var(--milagözlük-color);
}
.user-cart-wrapper .dropdown .btn {
  background-color: transparent !important;
  border: none !important;
  color: #333 !important;
  font-weight: 500;
  padding: 0; /* Padding'i sıfırla, ikon ve yazı düzgün hizalansın */
  box-shadow: none !important;
}
.user-cart-wrapper .dropdown .btn:hover {
  color: var(--milagözlük-color) !important;
}
.user-cart-wrapper .user-icon,
.user-cart-wrapper .cart-icon,
.user-cart-wrapper .search-icon {
  color: var(--milagözluk-color);;
  font-size: 1.2rem;
}
.user-cart-wrapper .cart-link,
.user-cart-wrapper .search-toggle-btn {
  color: #333;
  font-size: 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.3s ease;
}
.user-cart-wrapper .cart-link:hover,
.user-cart-wrapper .search-toggle-btn:hover {
  color: var(--milagözlük-color);
}
.user-cart-wrapper .cart-count-badge {
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  top: -5px; /* İkonun biraz üstüne */
  right: -5px; /* Badge'i ikonun sağ üst köşesine yaklaştırır */
  position: absolute;
  /* transform: translate(-50%, -50%); /* BU SATIRI KALDIRIYORUZ! */
  border-radius: 50%; /* Tam yuvarlak olmasını sağlar */
  min-width: 18px; /* Tek haneli sayılar için minimum genişlik */
  height: 18px;    /* Tek haneli sayılar için yükseklik */
  display: flex;   /* İçindeki sayıyı ortalamak için */
  align-items: center;
  justify-content: center;
  line-height: 1; /* Metin yüksekliğini ayarla */
}


.badge-custom { /* Bu sınıfı kullanıyorsanız, genel tanımını buraya ekleyin */
  position: absolute;
  top: 0;
  right: -5px;
  font-size: 0.75rem;
}

.search-toggle-btn { /* Üst header'daki arama butonu */
  background: none;
  border: none;
  color: var(--milagözlük-color);
  font-size: 22px;
}

/* Search Overlay */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; /* Başlangıçta gizli */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.search-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.search-overlay form {
  width: 90%;
  max-width: 600px;
  position: relative;
}

.search-overlay input {
  width: 100%;
  padding: 16px 60px 16px 25px;
  border-radius: 50px;
  border: none;
  font-size: 18px;
  outline: none;
}

.search-overlay button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background: var(--milagözlük-color); /* senin ana rengin */
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.search-overlay .close-search {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobil Düzenleme */
@media (max-width: 768px) {
  .search-overlay {
    justify-content: flex-start;
    padding-top: 100px;
  }

  .search-overlay .close-search {
    top: 20px;
    right: 20px;
    font-size: 26px;
  }

  .search-overlay form {
    margin: 0 auto;
  }
}


/* Header menü link hover efektleri (Mevcut) */
.header-menu-link i:hover,
.header-login-link i:hover {
  color: #2a1e6e;
  transition: color 0.3s;
}

/* ================================================================ */
/* MOBİL İÇİN ÖZEL STİLLER (YALNIZCA 767.98px ve altı ekranlar) */
/* ================================================================ */

@media (max-width: 767.98px) { /* Bootstrap'ın md breakpoint'inin altı */

  /* Üst Header'ın Sadece Logo İçeren Hali */
  .milagozluk-header .container {
      /* justify-content: center; */ /* Sadece logo varken ortalamak için */
      /* Masaüstünde space-between olduğu için, mobilde de flex-start yapıp logoyu mx-auto ile ortalayacağız. */
      justify-content: center; /* Sadece logo ortada olsun diye */
  }

  /* Mobilde logo transform'u kaldır */
.logo-inside-zoom {
  max-height: 30px;
}

  /* Masaüstü arama/kullanıcı/sepet wrapper'ını mobilde gizle */
  /* Bu zaten HTML'deki d-none ile hallediliyor, ekstra CSS'e gerek yok */
  .user-cart-wrapper {
      display: none !important;
  }

  /* =============== MOBİL BOTTOM NAVIGATION BAR STİLLERİ =============== */
  .milagozluk-bottom-nav {
      display: flex !important; /* d-md-none'u burada geçersiz kılar */
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60px; /* Sabit bottom bar yüksekliği */
      background-color: #fff;
      border-top: 1px solid #ddd; /* Üst kenarlık */
      box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Üste gölge */
      z-index: 1040; /* Header'dan daha yüksek olsun */
  }

  .milagozluk-bottom-nav .container {
      display: flex;
      justify-content: space-around; /* Elemanları eşit boşlukla dağıt */
      align-items: center;
      height: 100%;
      padding: 0 10px;
  }

  .milagozluk-bottom-nav .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-grow: 1; /* Eşit genişlikte dağılsınlar */
      color: var(--milagözluk-color);;
      font-size: 0.75rem; /* Yazı boyutu */
      text-align: center;
      transition: color 0.3s ease;
      padding: 5px 0; /* İç boşluk */
      background-color: transparent; /* Arka planı şeffaf yapabilir */
      border: none; /* Çerçeveyi kaldırabilir */
  }

  .milagozluk-bottom-nav .bottom-nav-item:hover {
      color: var(--milagözlük-color);
  }

  .milagozluk-bottom-nav .bottom-nav-icon {
      font-size: 1.4rem; /* İkon boyutu */
      margin-bottom: 3px; /* İkon ile yazı arası boşluk */
  }

  .milagozluk-bottom-nav .cart-icon-wrapper-mobile {
    position: relative; /* Badge'in bu div'e göre konumlanması için */
    display: flex; /* İçindeki ikon ve metni hizalamak için */
    flex-direction: column; /* İkon üstte, metin altta */
    align-items: center;
    justify-content: center;
    height: 100%; /* Alt bar öğesinin yüksekliğini doldur */
    padding-top: 5px; /* İkona üstten biraz boşluk */
    padding-bottom: 5px; /* Metine alttan biraz boşluk */
}

/* Mobil Bottom Nav Sepet Sayısı Badge Stili (yeni kapsayıcıya göre) */
.milagozluk-bottom-nav .cart-icon-wrapper-mobile .cart-count-badge {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    top: 0px;      /* Kapsayıcı div'in üstünden hizala */
    right: -8px;   /* Kapsayıcı div'in sağından dışarıya doğru */
    /* position: absolute; zaten var */
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2; /* İkonun üzerinde kalması için */
}


  /* ================================================================ */
  /* Sayfa İçeriği İçin Boşluklar (Mobil) */
  /* ================================================================ */
  body {
      padding-top: 70px; /* Üst header yüksekliği */
      padding-bottom: 60px; /* Alt bottom nav yüksekliği */
  }
}

/* Masaüstü için body padding'i (768px ve üzeri) */
@media (min-width: 768px) {
  body {
      padding-top: 70px; /* Üst header yüksekliği */
      padding-bottom: 0; /* Alt bar görünmediği için padding gerekmez */
  }
}

/* Swiper boşluklarını, kart hizalarını ve görsel oranlarını düzeltir (Mevcut kurallar) */
.recommendedSwiper {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

.recommendedSwiper .swiper-wrapper {
height: auto !important;
}

.recommendedSwiper .swiper-slide {
display: flex;
flex-direction: column;
height: auto !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}

.recommendedSwiper .swiper-slide > a {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.recommendedSwiper .card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.recommendedSwiper .card .position-relative {
aspect-ratio: 1 / 1.1;
overflow: hidden;
}

.product-suggestion-img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1 / 1.1;
}

/* Mobil cihazlarda (md-none sınıfı olduğu için 768px altı) pagination'a margin-top ekle */
@media (max-width: 767.98px) {
.recommendedSwiper .swiper-pagination {
  margin-top: 20px;
}
}

/* Swiper wrapper'a mobil için pb-5 */
@media (max-width: 575.98px) { /* Bootstrap'ın 'sm' breakpoint'inin altı */
  .swiper-wrapper.pb-5-mobile {
      padding-bottom: 3rem !important;
  }
}

/* Diğer ekran boyutlarında bu padding'i kaldırmak için */
@media (min-width: 576px) {
  .swiper-wrapper.pb-5-mobile {
      padding-bottom: 0 !important;
  }
}
.category-menu {
  padding: 12px 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow-x: hidden; /* önemli */
}

.category-menu .swiper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
    /* Scrollbar'ı her yerde gizle */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE 10+ */
}

.category-menu .swiper-wrapper {
  display: flex;
  align-items: center;
  height: auto;
  padding-left: 10px;
}

.category-menu .swiper-slide {
  width: auto !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.category-link {
  display: inline-block;
  padding: 7px 18px;
  margin-right: 10px;
  background-color: #f3f3f3;
  border-radius: 20px;
  text-decoration: none;
  color: var(--milagözluk-color);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.category-link:hover {
  background-color: #e9e9e9;
  color: var(--milagözluk-color);
}

.category-link.active {
  background-color: var(--milagözluk-color);
  color: #fff;
}

.milagozluk-footer {
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    font-size: 14px;
}

.footer-title {
    color: var(--milagözluk-color);
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
}

.milagozluk-footer a {
    color: var(--milagözluk-color);;
    text-decoration: none;
    transition: color 0.3s;
}

.milagozluk-footer a:hover {
    color: var(--milagözluk-color);
}

.social-icons a {
    font-size: 18px;
    color: var();
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--milagözluk-color);
}
.nuvvosoft-link {
    color: var(--milagözluk-color);
    text-decoration: none;
    margin-left: 5px;
    font-weight: bold;
}

.nuvvosoft-link:hover {
    text-decoration: underline;
}
.milagozluk-footer small {
    display: block;
    word-break: break-word;
    text-align: center;
    font-size: 13px;
    color: #666;
    padding: 10px 0;
}
.milagozluk-footer .container {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .category-link {
        font-size: 13px;
        padding: 5px 8px;
    }
}
@media (max-width: 768px) {
    .search-input {
        padding: 8px 15px;
        padding-right: 40px;
        font-size: 14px;
    }
}


/* Login Sayfası Özel */
.login-section {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

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

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo h2 {
    color: var(--milagözluk-color); /* Artık tema rengi */
    font-weight: bold;
    margin: 0;
}

.login-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.login-toggle button {
    flex: 1;
    border: none;
    background: none;
    padding: 10px;
    font-weight: bold;
    color: #888;
    transition: 0.3s;
}

.login-toggle .active {
    color: var(--milagözluk-color);
    border-bottom: 2px solid var(--milagözluk-color);
}

.login-card .form-control {
    border-radius: 10px;
    padding: 10px 20px;
}

.btn-login {
    background-color: var(--milagözluk-color);
    color: #ffffff; /* Burayı düzelttim, beyaz yazacak */
    border-radius: 30px;
    padding: 10px;
    width: 100%;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s;
    border: none;
}

.btn-login:hover {
    background-color: #2a1e6e; /* Tema renginin koyusu */
    color: #ffffff
}

/* Şifremi Unuttum Link */
.forgot-password {
    text-align: right;
    margin-top: 10px;
}

.forgot-password a {
    color: var(--milagözluk-color);
    font-size: 14px;
    text-decoration: none;
}

.forgot-password a:hover {
    text-decoration: underline;
}
.login-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 0; /* boşluk olmasın */
}

.login-toggle .btn-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    text-decoration: none;
    color: #888;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.login-toggle .btn-tab.active {
    color: var(--milagözluk-color);
    border-bottom: 2px solid var(--milagözluk-color);
}

.login-toggle .btn-tab:hover {
    color: var(--milagözluk-color);
}

/*      n ortak yapı */
.product-swiper {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .product-swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
    height: auto !important;
  }
  
  .product-swiper .swiper-slide {
    width: 200px !important;
    flex-shrink: 0;
    margin-right: 16px;
    height: auto;
  }
  
/* Ana ürün kartı yapısı */
.home-product-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Görsel alanı */
.card-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Kare oranı */
  overflow: hidden;
}

.card-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-bottom: 1px solid #eee;
}

.home-product-card:hover .card-image-wrapper img {
  transform: scale(1.08);
}

/* Kart içerik */
.card-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* Badge görünümü */
.badge-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.home-product-card .badge {
  font-size: 11px;
  padding: 4px 8px;
  line-height: 1;
}

/* Başlık + marka */
.product-name {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  margin-bottom: 6px;
  min-height: 25px;
}

/* Fiyat */
.product-price {
  font-size: 1rem;
  font-weight: bold;
  color: #d9230f;
  margin-top: auto;
}


  .profile-menu-active {
    background-color: var(--milagözluk-color) !important;
    color: #fff !important;
    border-color: var(--milagözluk-color) !important;
}

.profile-menu-active i {
    color: #fff !important;
}

.fixed-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #25d366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1250;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: bottom 0.3s ease;
  }
  
  /* Scroll-top aktifse whatsapp yukarıya çıkar */
  .fixed-whatsapp.up {
    bottom: 80px;
  }
  
  .fixed-scrolltop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1251;
    background-color: var(--milagözluk-color);
    color: var(--beyaz);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .fixed-scrolltop.show {
    opacity: 1;
    visibility: visible;
  }
  
  .fixed-scrolltop:hover {
    background-color: var(--siyah);
    
  }
/* Medya Sorgusu: Küçük Ekranlar (örneğin 768px altı tablet ve mobil) */
@media (max-width: 768px) {
  .fixed-whatsapp {
      bottom: 70px; /* Mobil cihazlarda WhatsApp butonunu daha yukarı kaydır */
      right: 15px; /* İsteğe bağlı olarak sağdan boşluğu da azaltabilirsiniz */
  }

  .fixed-whatsapp.up {
      bottom: 130px; /* Scroll-top aktifken mobil cihazlarda daha da yukarı kaydır */
  }

  .fixed-scrolltop {
      bottom: 70px; /* Mobil cihazlarda Scroll-top butonunu daha yukarı kaydır */
      right: 15px; /* İsteğe bağlı olarak sağdan boşluğu da azaltabilirsiniz */
  }
}

/* Medya Sorgusu: Daha Küçük Ekranlar (örneğin 576px altı telefonlar) */
@media (max-width: 576px) {
  .fixed-whatsapp {
      bottom: 70px; /* Küçük telefonlarda biraz daha yukarı */
      right: 10px;
      width: 45px; /* İsteğe bağlı olarak boyutu küçültebilirsiniz */
      height: 45px;
      font-size: 18px; /* İkon boyutu */
  }

  .fixed-whatsapp.up {
      bottom: 140px; /* Scroll-top aktifken daha da yukarı */
  }

  .fixed-scrolltop {
      bottom: 75px; /* Scroll-top butonunun altında olması için (eğer whatsapp butonu daha yukarıdaysa) */
      /* Eğer scrolltop ve whatsapp butonları üst üste geliyorsa: */
      /* bottom: 20px; whatsapp butonundan bağımsız bir konumda tutulabilir. */
      /* VEYA: Scrolltop butonunu whatsapp butonunun altına konumlandırın, ancak right değerini farklı tutarak yan yana gelsinler. */
     
      width: 40px;
      height: 40px;
      font-size: 16px;
  }
  /* Alternatif olarak, scrolltop butonu sadece whatsapp butonu aktif değilken görülebilir */
  /* ya da sağda birbiri üstüne binecekse, sadece bir tanesi görünür. */
}
  .swiper-button-next, .swiper-button-prev {
    color: var(--milagözluk-color);
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: absolute;
    top: 50%; /* Orta hizada tut */
    transform: translateY(-50%); /* Dikey ortalama */
    opacity: 1; /* Daima görünür yap */
    transition: opacity 0.3s ease;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px;
}

.swiper:hover .swiper-button-next, 
.swiper:hover .swiper-button-prev,
.swiper-button-next, 
.swiper-button-prev {
    opacity: 1; /* Oklar daima görünür */
}

@media (max-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        width: 24px;
        height: 24px;
        opacity: 1;
    }
}
  
/* boşluk olmasın */


/* Genel Ayarlar */
.section-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #ffffff;
}

.populer-section {
    background: var(--milagozluk-color-rgb); 
    padding: 20px;
    border-radius: 20px;
    color: var(--milagözluk-color);
}

.populer-title {
    font-weight: bold;
    color: #ffffff;
}

.populer-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px; /* Kart yüksekliği */
    margin: 5px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.populer-card img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.populer-all-products-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.populer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.populer-all-products-text {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

.populer-all-products-icon {
    font-size: 28px;
    margin-top: 8px;
    color: #ffffff;
    z-index: 2;
}

.populer-all {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.populer-all:hover,
.populer-all-products-link:hover {
    text-decoration: none;
}


.cok-satan-section {
    background: linear-gradient(135deg, #FF8A00, #FF6A00);
    padding: 20px;
    border-radius: 20px;
    color: white;
}

.cok-satan-title {
    font-weight: bold;
    color: #ffffff;
}

.cok-satan-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    margin: 5px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cok-satan-card img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.cok-satan-all-products-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cok-satan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.cok-satan-all-products-text {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

.cok-satan-all-products-icon {
    font-size: 28px;
    margin-top: 8px;
    color: #ffffff;
    z-index: 2;
}

.cok-satan-all {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.cok-satan-all:hover,
.cok-satan-all-products-link:hover {
    text-decoration: none;
}
.hizli-teslimat-section {
    background: linear-gradient(135deg, #28a745, #218838);
    padding: 20px;
    border-radius: 20px;
    color: white;
}

.hizli-teslimat-title {
    font-weight: bold;
    color: #ffffff;
}

.hizli-teslimat-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    margin: 5px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.hizli-teslimat-card img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

.hizli-teslimat-all-products-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    color: #fff;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.hizli-teslimat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

.hizli-teslimat-all-products-text {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    z-index: 2;
    position: relative;
}

.hizli-teslimat-all-products-icon {
    font-size: 28px;
    margin-top: 8px;
    color: #ffffff;
    z-index: 2;
}

.hizli-teslimat-all {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.hizli-teslimat-all:hover,
.hizli-teslimat-all-products-link:hover {
    text-decoration: none;
}
.colorful {
    color: var(--milagözluk-color); /* Beyaz renk */
    font-weight: bold;
    text-decoration: none; /* Alt çizgiyi kaldırır */
}

.colorful:hover,
.colorful:focus {
    color: #fff;
    text-decoration: none; /* Hover ve odaklandığında da çizgiyi kaldırır */
}


#toast-container > .toast-success {
  background-color: #198754 !important;
  color: white !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
/* Mobil cihazlar için (örneğin 768px genişliğin altı) */
@media (max-width: 767.98px) { /* Bootstrap'ın 'md' breakpoint'inden bir piksel önce */
  /* Toastr'ın ana kapsayıcısını hedefle */
  /* Toastr'ın varsayılan sınıfı genellikle .toastr */
  #toast-container {
      top: 75px !important; /* Mevcut pozisyondan 50px aşağı kaydır */
      /* Eğer sağ veya sol pozisyonu da varsa, onları sabit tutabilirsiniz */
      /* right: 12px !important; */
  }
}
.userContent{
    margin-top: zpx ;
}

/* Duyuru Swiper Kapsayıcısı */
.announcement-swiper-container {
  width: 100%;
  /* Masaüstü için biraz daha büyük bir başlangıç yüksekliği */
  height: 55px; /* Önceden 40px idi */
  background-color: var(--milagözluk-color);
  color: #fff;
  padding: 0 15px; /* Dikey padding 0, yatay 15px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
}

/* Duyuru Swiper (Swiper'ın kendi ana sınıfı) */
.announcementSwiper {
  width: 100%;
  height: 100%; /* Kapsayıcısının yüksekliğini alacak (masaüstünde 50px) */
  overflow: hidden; /* Masaüstünde taşmayı gizle */
}

/* Duyuru Slaytı İçeriği */
.announcementSwiper .swiper-slide.announcement-slide {
  display: flex;
  align-items: center; /* Dikeyde ortala */
  justify-content: center; /* Yatayda ortala */
  text-align: center;
  height: 100%; /* Slaytın yüksekliği kapsayıcısı kadar olsun (masaüstünde 50px) */
  padding: 0 20px; /* Slayt içi yan boşluklar, dikeyde boşluk 0 */
}

.announcementSwiper .swiper-slide.announcement-slide p {
  margin-bottom: 0;
  font-size: 1.1rem; /* Metin boyutunu biraz büyütelim */
  font-weight: 500;
  line-height: 1.3; /* Satır yüksekliğini biraz artırarak okunabilirliği iyileştir */
  white-space: nowrap; /* Masaüstünde metin tek satırda kalsın */
  overflow: hidden; /* Masaüstünde taşarsa gizle */
  text-overflow: ellipsis; /* Masaüstünde taşarsa üç nokta göster */
  max-height: 100%; /* Bu önemli: Masaüstünde yüksekliği aşmasın */
}

/* OK BUTONLARI - Tamamen Gizle */
.announcement-swiper-container .swiper-button-next,
.announcement-swiper-container .swiper-button-prev {
  display: none !important; /* Ok butonlarını tamamen gizle */
}

/* Pagination (Noktacıklar) */
.announcement-swiper-container .swiper-pagination {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
}

.announcement-swiper-container .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.6);
  opacity: 0.8;
  margin: 0 3px;
  width: 6px;
  height: 6px;
}

.announcement-swiper-container .swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}

/* Küçük ekranlar için düzenlemeler (768px altı) */
@media (max-width: 768px) {
  .announcement-swiper-container {
      height: 75; /* Mobil cihazlarda içeriğe göre otomatik genişlesin */
      max-height: 75px; /* Minimum bir yükseklik belirleyelim (masaüstünden biraz küçük) */
      padding: 5px 10px; /* Dikey padding ekleyerek metnin sıkışmasını önle */
  }

  .announcementSwiper {
      height: auto; /* Swiper da içeriğe göre otomatik genişlesin */
  }

  .announcementSwiper .swiper-slide.announcement-slide {
      height: auto; /* Slayt da içeriğe göre genişlesin */
      align-items: flex-start; /* Metin yukarıdan başlasın, ortalanmasın */
      padding: 5px 15px; /* Mobil slayt içi padding */
  }

  .announcementSwiper .swiper-slide.announcement-slide p {
      font-size: 1rem; /* Mobil metin boyutu */
      line-height: 1.4; /* Mobil satır yüksekliği */
      white-space: normal; /* Mobil cihazlarda metin sarmalasın */
      overflow: visible; /* Mobil cihazlarda taşmayı gizleme */
      text-overflow: clip; /* Mobil cihazlarda üç nokta gösterme (gerek yok) */
      display: block; /* block yaparak normal metin akışını sağla */
      max-height: none; /* Max yüksekliği kaldır, dilediği kadar genişlesin */
  }
}





      .product-detail {
  font-family: 'Segoe UI', sans-serif;
}
@media (min-width: 768px) {
  .product-detail {
  }
}

.product-detail-main-image-wrapper {
  width: 400px;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
}

.product-detail-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.product-detail-thumb-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #eee;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.product-detail-thumb-img:hover {
  border-color: var(--milagözluk-color, #6f42c1);
}

.product-detail-inputs-wrapper {
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 15px;
}
.product-detail-inputs-wrapper-cappicino-cart {
  border: 1px solid var(--milagözluk-color);
  background-color: var(--milagözluk-color);
  border-radius: 25px;
  padding: 15px;
}

.product-detail-inputs-wrapper-cappicino-cart .btn {
  background-color: transparent;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px; /* opsiyonel ama orantılı */
}
.product-detail-inputs-wrapper-cappicino-buy {
  border: 2px solid var(--milagözluk-color);
  border-radius: 25px;
  padding: 15px;
}

.product-detail-inputs-wrapper-cappicino-buy .btn {
  background-color: transparent;
  color: var(--milagözluk-color);
  font-weight: 600;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px; /* opsiyonel ama orantılı */
}

.quantity-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.product-detail-tabs {
  border-bottom: 1px solid #ddd;
}

.product-detail-tab-btn {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #999;
  font-size: 15px;
  
  margin-right: 20px;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease-in-out;
}

.product-detail-tab-btn:hover {
  color: var(--milagözluk-color);
}

.product-detail-tab-btn.active {
  color: #111;
  font-weight: 700;
}

.product-detail-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--milagözluk-color);
}
.product-detail-active-thumb {
  border-color: var(--milagözluk-color, #6f42c1); /* fallback mor ton */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}


.favorite-btn {
  border: none;
  background: transparent;
  z-index: 10;
}
.favorite-btn i {
  font-size: 1.2rem;
}

.product-price span {
  font-size: 0.9rem;
}
.product-suggestion-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
#imageZoomModal .modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

#imageZoomModal .modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
}

#zoomedImage {
  display: block;
  margin: 0 auto;
  max-width: 33vw; /* Masaüstü için */
  max-height: 90vh;
  object-fit: contain;
}

/* Mobilde genişlik %50 olsun */
@media (max-width: 768px) {
  #zoomedImage {
    max-width: 75vw;
  }
}
.product-title {
  font-size: 1.5rem; /* h2 benzeri */
  font-weight: 600;
}
@media (min-width: 768px) {
  .product-title {
    font-size: 1.75rem; /* daha büyük ekranlarda biraz büyütebiliriz */
  }
}
/* ✅ Swiper boşluklarını, kart hizalarını ve görsel oranlarını düzeltir */
.recommendedSwiper {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.recommendedSwiper .swiper-wrapper {
  height: auto !important;
}

.recommendedSwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.recommendedSwiper .swiper-slide > a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.recommendedSwiper .card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recommendedSwiper .card .position-relative {
  aspect-ratio: 1 / 1.1;
  overflow: hidden;
}

.product-suggestion-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1.1;
}

@media (max-width: 767.98px) {
  .recommendedSwiper .swiper-pagination {
    padding-top: 75px !important; /* İstediğiniz boşluk miktarını ayarlayabilirsiniz */
  }
}
/* Resimler için Placeholder - Skeleton Loader Benzeri */
/* Mevcut loading-placeholder kuralları iyi, ama bazı eklemelerle daha sağlam olacak */
.loading-placeholder {
  background-color: #f0f0f0;
  animation: pulse 1.5s infinite ease-in-out;
  border-radius: 4px;
  position: relative; /* ::after pseudo-elementi için */
  overflow: hidden; /* Shimmer efektinin dışarı taşmaması için */
  /* min-height yerine doğrudan height veya aspect-ratio kullanacağız */
}
.loading-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  100% {
      left: 100%;
  }
}

/* Yüklenen resimler için placeholder efektlerini kaldırma */
img.loading-placeholder:not([src=""]) {
  background-color: transparent;
  animation: none;
  min-height: auto; /*Placeholder min-height'ını kaldır */
  position: static; /* veya relative, after pseudo-elementini kaldırmak için */
}

img.loading-placeholder:not([src=""])::after {
  display: none; /* Placeholder shimmer efektini kaldır */
}

/* Video Overlay CSS - Mevcut haliyle iyi */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  border-radius: 4px;
}
.video-overlay.hidden {
  display: none;
}

/* Thumbnail'deki video ikonunu ortalamak için - Mevcut haliyle iyi */
.video-thumbnail-wrapper {
  position: relative;
  overflow: hidden;
}
.video-thumbnail-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumbnail-wrapper .fa-play-circle {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* --------------- ÖNEMLİ DEĞİŞİKLİKLER BURADA --------------- */

/* Tüm görseller için genel CSS, eğer bir kapsayıcıya sahip değillerse */
#product-detail-page img {
  display: block; /* Resimlerin blok element gibi davranmasını sağlar */
  max-width: 100%;
  height: auto; /* En-boy oranını korur */
  object-fit: contain; /* Varsayılan olarak içeriği sığdırır */
}

/* Masaüstü Ana Görsel Alanı için Yeni Kurallar */
/* Bu div, resmin kendisini sarar ve boyutlandırmayı yönetir */
.main-image-section .main-image-wrapper {
  position: relative; /* İçindeki resim ve video için konumlandırma */
  width: 100%;
  max-width: 650px; /* PHP'den gelen max-width değeriyle uyumlu */
  /* Önemli: Yükseklik veya en-boy oranı belirleyerek yerleşim kaymasını önle */
  /* Varsayılan olarak 450px yüksekliği hedeflediğimiz için */
  height: 450px; /* Sabit bir yükseklik veriyoruz */
  aspect-ratio: 650 / 450; /* Genişlik / Yükseklik. Bu, height: 450px ile birlikte çalışır */
  background-color: #f0f0f0; /* Yüklenene kadar gri arka plan */
  border-radius: 4px;
  overflow: hidden; /* İçerik taşmasını engelle */
  margin: 0 auto; /* Görseli ortala */
}

/* Masaüstü Ana Görsel (img etiketi) */
.product-detail-main-image {
  width: 100%;
  height: 100%; /* Kapsayıcısının tamamını kapla */
  object-fit: contain; /* İçine sığdır */
  display: block; /* Placeholder'ı gizlerken resmin görünmesi için */
  border-radius: 4px;
}

/* Masaüstü Ana Video (video etiketi) */
.main-image-section video {
  width: 100%;
  height: 100%; /* Kapsayıcısının tamamını kapla */
  object-fit: contain;
  border-radius: 4px;
}


/* Küçük Resim Galerisi (Thumbnails) */
.product-detail-thumb-img, .video-thumbnail-wrapper {
  width: 70px;
  height: 70px;
  aspect-ratio: 1 / 1; /* Kare bir alan ayır */
  object-fit: cover; /* İçeriği kutuya sığdırmak yerine doldur ve kırp */
  background-color: #f0f0f0; /* Yüklenirken gri arka plan */
  border-radius: 4px;
  display: flex; /* İçerik (resim veya ikon) ortalamak için */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Taşmayı engelle */
}
.product-detail-thumb-img {
  border: 2px solid transparent; /* Varsayılan border */
}
.product-detail-thumb-img.product-detail-active-thumb,
.video-thumbnail-wrapper.product-detail-active-thumb {
  border-color: #007bff; /* Aktif olduğunda mavi border */
}

/* Media hidden sınıfları için */
.media-hidden {
  display: none !important;
}

/* Placeholder Styling */
.skeleton-loading {
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  /* transition ekleyebiliriz, yüklenen içerik daha yumuşak belirir */
  transition: background-color 0.3s, animation 0.3s;
}

.skeleton-image {
  width: 100%;
  /* padding-bottom: 100%; /* Kare en-boy oranı için bu iyi. Eğer resimler kare ise kalsın. */
  /* Eğer resimler farklı en-boy oranlarına sahipse, aşağıdaki gibi belirli bir height veya aspect-ratio kullanın: */
  height: 200px; /* Örneğin, ürün görseli için sabit yükseklik. Kendi ürün kartı görsel yüksekliğinize göre ayarlayın. */
  aspect-ratio: 1 / 1; /* Veya 4 / 3; resimlerinizin tipik en-boy oranına göre */
  
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* Yüklenen resmin skeleton stilini kaldırma */
.skeleton-loading img:not([src=""]) {
  background-color: transparent !important;
  animation: none !important;
  height: auto !important; /* Resim kendi doğal yüksekliğini alsın */
  padding-bottom: 0 !important; /* padding-bottom kaldırılır */
}


.skeleton-text {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
  /* METİN İÇİN SABİT YÜKSEKLİKLER VEYA GENİŞLİKLER */
  height: 1.2em; /* Tek satırlık metin için, font-size'ınıza uygun */
  width: 80%; /* Genişliği de sınırlayabiliriz, örneğin %80 */
}

/* Farklı metin türleri için (başlık, açıklama) */
.skeleton-text.short {
  width: 50%;
  height: 1.2em;
}
.skeleton-text.medium {
  width: 75%;
  height: 1.2em;
}
.skeleton-text.long {
  width: 100%;
  height: 1.2em;
}
.skeleton-text.paragraph {
  height: 3.6em; /* 3 satır için (1.2em * 3) */
  width: 100%;
}


.skeleton-button {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 50%; /* Dairesel düğme için */
  /* DÜĞME İÇİN SABİT GENİŞLİK VE YÜKSEKLİK */
  width: 36px; /* Kendi düğme boyutunuza göre ayarlayın */
  height: 36px; /* Kendi düğme boyutunuza göre ayarlayın */
  /* Veya eğer butonlar dikdörtgense */
  /* border-radius: 4px; width: 120px; height: 40px; */
}

@keyframes loading {
  0% {
      background-position: 200% 0;
  }
  100% {
      background-position: -200% 0;
  }
}

/* YÜKLENEN İÇERİK İÇİN SKELETON ETKİSİNİ KALDIRMA */
/* Bu, skeleton etkisi bittiğinde elemanların orijinal görünümlerine dönmesini sağlar */
.loaded-content .skeleton-image,
.loaded-content .skeleton-text,
.loaded-content .skeleton-button {
  background: none !important;
  animation: none !important;
  padding-bottom: 0 !important; /* Resimler için */
  height: auto !important; /* Metin ve düğme için */
  width: auto !important; /* Metin için */
}

/* Eğer skeleton div'i tamamen kaldırılacaksa, JS ile .skeleton-loading div'ini kaldırabiliriz. */
/* Eğer içeriğin kendisi .skeleton-loading ise, src geldiğinde veya içerik yüklendiğinde stilini değiştiririz */