:root {
  --color-1: #000000;
  --color-2: #e85b01;
  --color-3: #543604;
  --color-4: #fee4cb;
  --color-5: #707149;
  --color-6: #f5a661;
}
/**
 * Ana CSS Dosyası
 *
 * Nigar Ölemez Balları e-ticaret sitesinin tüm stil tanımlamaları
 * Koyu tema (dark mode) tasarım
 *
 * Dosya Yolu: Assets/style/main.css
 */

/* ============================================ */
/* TEMEL STİLLER (BASE STYLES) */
/* ============================================ */

/* CSS Custom Properties for Color Palette */
/* :root is now defined dynamically above */

/* Kullanıcı avatar stilleri */
.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.avatar-circle i {
    font-size: 1.2rem;
}

/* Body - Sayfa genel görünümü */
body {
  /* Koyu siyah arka plan */
  background-color: var(--color-1) !important;

  /* Açık gri metin rengi (okunabilirlik için) */
  color: #f8f9fa !important;

  /* Font ailesi - Modern ve okunabilir */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================ */
/* NAVİGASYON ÇUBUĞU (NAVBAR) */
/* ============================================ */

/* Marka/Logo stili */
.navbar-brand.brand {
  /* Büyük font boyutu */
  font-size: 1.5rem;

  /* Harfler arası boşluk - Daha şık görünüm */
  letter-spacing: 0.5px;
}

/* Arama input kutusu */
.search-input {
  /* Koyu arka plan */
  background-color: #1a1a1a !important;

  /* Kenarlık rengi */
  border-color: #333 !important;

  /* Metin rengi beyaz */
  color: #fff !important;
}

/* Arama input'u focus olduğunda (tıklandığında) */
.search-input:focus {
  /* Biraz daha açık arka plan */
  background-color: #2a2a2a !important;

  /* Sarı kenarlık (vurgu için) */
  border-color: #ffc107 !important;

  /* Metin rengi beyaz kalır */
  color: #fff !important;

  /* Sarı gölge efekti */
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* Sepet butonu */
.cart-btn {
  /* Sarı arka plan */
  background-color: #ffc107;

  /* Siyah metin */
  color: #000;

  /* Yuvarlak buton */
  border-radius: 50%;

  /* Sabit genişlik */
  width: 45px;

  /* Sabit yükseklik */
  height: 45px;

  /* Flexbox ile içeriği ortala */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Badge için pozisyon referansı */
  position: relative;

  /* Yumuşak geçiş efekti */
  transition: all 0.3s ease;
}

/* Sepet butonuna hover (üzerine gelindiğinde) */
.cart-btn:hover {
  /* Daha açık sarı */
  background-color: #ffca2c;

  /* Hafif büyütme efekti */
  transform: scale(1.1);
}

/* Sepet ürün sayısı badge'i */
.cart-count {
  /* Sağ üst köşeye yerleştir */
  position: absolute;
  top: -5px;
  right: -5px;

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

  /* Beyaz metin */
  color: white;

  /* Yuvarlak badge */
  border-radius: 50%;

  /* Sabit boyutlar */
  width: 20px;
  height: 20px;

  /* İçeriği ortala */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Küçük font */
  font-size: 0.75rem;

  /* Kalın yazı */
  font-weight: bold;
}

/* ============================================ */
/* BÖLÜM BAŞLIKLARI (SECTION TITLES) */
/* ============================================ */

/* Bölüm başlığı stili */
.section-title {
  /* Sarı renk */
  color: #ffc107;

  /* Kalın yazı */
  font-weight: 600;

  /* Alt boşluk */
  margin-bottom: 1.5rem;

  /* Alt çizgi için pozisyon referansı */
  position: relative;

  /* Alt çizgi için boşluk */
  padding-bottom: 0.5rem;
}

/* Başlık altındaki dekoratif çizgi */
.section-title::after {
  /* Boş içerik (sadece görsel) */
  content: '';

  /* Mutlak pozisyon */
  position: absolute;
  bottom: 0;
  left: 0;

  /* Çizgi boyutu */
  width: 60px;
  height: 3px;

  /* Soldan sağa solan gradient */
  background: linear-gradient(90deg, #ffc107, transparent);
}

/* ============================================ */
/* ÜRÜN KARTLARI (PRODUCT CARDS) */
/* ============================================ */

/* Ürün kartı container */
.product-card {
  /* Gradient arka plan (3D efekti) */
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);

  /* Yuvarlatılmış köşeler */
  border-radius: 12px;

  /* Taşan içeriği gizle */
  overflow: hidden;

  /* Yumuşak geçiş efekti */
  transition: all 0.3s ease;

  /* Gölge efekti */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

  /* Tam yükseklik */
  height: 100%;

  /* Dikey flexbox düzeni */
  display: flex;
  flex-direction: column;
}

/* Kart üzerine gelindiğinde */
.product-card:hover {
  /* Yukarı kaydırma efekti */
  transform: translateY(-8px);

  /* Daha belirgin sarı gölge */
  box-shadow: 0 12px 24px rgba(255, 193, 7, 0.2);
}

/* Ürün görseli alanı */
.product-media {
  /* Tam genişlik */
  width: 100%;

  /* Sabit yükseklik */
  height: 220px;

  /* Görseli kapsayacak şekilde boyutlandır */
  background-size: cover;

  /* Görseli ortala */
  background-position: center;

  /* Tekrar etme */
  background-repeat: no-repeat;

  /* Overlay için pozisyon referansı */
  position: relative;

  /* Taşan içeriği gizle */
  overflow: hidden;
}

/* Görsel üzerindeki koyu overlay (hover için) */
.product-media::before {
  /* Boş içerik */
  content: '';

  /* Tam kaplama */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Yukarıdan aşağıya koyulaşan gradient */
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 100%);

  /* Başlangıçta görünmez */
  opacity: 0;

  /* Yumuşak geçiş */
  transition: opacity 0.3s ease;
}

/* Kart hover olduğunda overlay'i göster */
.product-card:hover .product-media::before {
  opacity: 1;
}

/* Ürün bilgileri alanı */
.product-body {
  /* İç boşluk */
  padding: 1rem;

  /* Kalan alanı kapla */
  flex-grow: 1;

  /* Dikey flexbox */
  display: flex;
  flex-direction: column;
}

/* Ürün başlığı */
.product-title {
  /* Font boyutu */
  font-size: 1rem;

  /* Kalın yazı */
  font-weight: 600;

  /* Beyaz renk */
  color: #fff;

  /* Alt boşluk */
  margin-bottom: 0.5rem;

  /* Satır yüksekliği */
  line-height: 1.4;
}

/* Kategori etiketi */
.product-cat {
  /* Gri renk */
  color: #adb5bd;

  /* Alt boşluk */
  margin-bottom: 0.75rem;

  /* Küçük font */
  font-size: 0.875rem;
}

/* Fiyat etiketi */
.price {
  /* Büyük font */
  font-size: 1.25rem;

  /* Kalın yazı */
  font-weight: bold;

  /* Sarı renk */
  color: #ffc107;

  /* Flexbox ile hizalama */
  display: flex;
  align-items: center;
}

/* ============================================ */
/* KAMPANYA KARTLARI (PROMO CARDS) */
/* ============================================ */

/* Kampanya kartı */
.promo-card {
  /* Gradient arka plan */
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a);

  /* Yuvarlatılmış köşeler */
  border-radius: 10px;

  /* İç boşluk */
  padding: 1.5rem;

  /* Yatay flexbox düzeni */
  display: flex;
  align-items: center;
  gap: 1rem;

  /* Yumuşak geçiş */
  transition: all 0.3s ease;

  /* İnce kenarlık */
  border: 1px solid #333;
}

/* Kampanya kartına hover */
.promo-card:hover {
  /* Sarı kenarlık */
  border-color: #ffc107;

  /* Sağa kaydırma efekti */
  transform: translateX(5px);
}

/* Kampanya ikonu */
.promo-icon {
  /* Büyük ikon */
  font-size: 2rem;

  /* Sarı renk */
  color: #ffc107;

  /* Minimum genişlik */
  min-width: 50px;

  /* Ortala */
  text-align: center;
}

/* Kampanya başlığı */
.promo-card h5 {
  /* Beyaz renk */
  color: #fff;

  /* Az alt boşluk */
  margin-bottom: 0.25rem;

  /* Font boyutu */
  font-size: 1.1rem;
}

/* ============================================ */
/* FOOTER (ALT BİLGİ) */
/* ============================================ */

.footer {
  /* Üst boşluk */
  margin-top: 4rem;

  /* Üst kenarlık */
  border-top: 1px solid #333;
}

/* ============================================ */
/* CAROUSEL (SLIDER) */
/* ============================================ */

/* Carousel görselleri */
.carousel-item img {
  /* Sabit yükseklik */
  height: 400px;

  /* Görseli kırpmadan sığdır */
  object-fit: cover;

  /* Hafif koyulaştırma (metin okunabilirliği için) */
  filter: brightness(0.8);
}

/* Carousel yazı alanı */
.carousel-caption {
  /* Yarı saydam siyah arka plan */
  background: rgba(0, 0, 0, 0.6);

  /* İç boşluk */
  padding: 1.5rem;

  /* Yuvarlatılmış köşeler */
  border-radius: 10px;

  /* Bulanıklık efekti (modern görünüm) */
  backdrop-filter: blur(5px);
}

/* ============================================ */
/* BUTONLAR (BUTTONS) */
/* ============================================ */

/* Sarı outline buton hover */
.btn-outline-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

/* Sarı dolu buton */
.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
  font-weight: 600;
}

/* Sarı buton hover */
.btn-warning:hover {
  background-color: #ffca2c;
  border-color: #ffca2c;
}

/* ============================================ */
/* RESPONSİVE TASARIM (RESPONSIVE DESIGN) */
/* ============================================ */

/* Tablet ve küçük ekranlar (768px ve altı) */
@media (max-width: 768px) {
  /* Ürün görseli daha küçük */
  .product-media {
    height: 180px;
  }

  /* Carousel daha küçük */
  .carousel-item img {
    height: 250px;
  }

  /* Başlık daha küçük */
  .section-title {
    font-size: 1.5rem;
  }

  /* Kampanya kartları dikey düzen */
  .promo-card {
    flex-direction: column;
    text-align: center;
  }
}

/* Mobil cihazlar (576px ve altı) */
@media (max-width: 576px) {
  /* Ürün başlığı daha küçük */
  .product-title {
    font-size: 0.9rem;
  }

  /* Fiyat daha küçük */
  .price {
    font-size: 1.1rem;
  }

  /* Ürün görseli daha küçük */
  .product-media {
    height: 160px;
  }
}

/* ============================================ */
/* YÜKLEME ANİMASYONU (LOADING ANIMATION) */
/* ============================================ */

/* Shimmer animasyonu tanımı */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Yükleme iskelet ekranı */
.loading-skeleton {
  /* Shimmer animasyonunu uygula */
  animation: shimmer 2s infinite;

  /* Gradient arka plan */
  background: linear-gradient(to right, #1a1a1a 4%, #2a2a2a 25%, #1a1a1a 36%);

  /* Büyük arka plan boyutu (animasyon için) */
  background-size: 1000px 100%;
}

/* ============================================ */
/* FİLTRELEME BÖLÜMÜ (FILTER SECTION) */
/* ============================================ */

/* Filtreleme container */
.filter-section {
  /* Koyu arka plan */
  background: #1a1a1a;

  /* İç boşluk */
  padding: 1.5rem;

  /* Yuvarlatılmış köşeler */
  border-radius: 10px;

  /* Alt boşluk */
  margin-bottom: 2rem;

  /* Kenarlık */
  border: 1px solid #333;
}

/* Filtreleme form elemanları */
.filter-section .form-select,
.filter-section .form-control {
  background-color: #0a0a0a;
  border-color: #333;
  color: #fff;
}

/* Form elemanları focus olduğunda */
.filter-section .form-select:focus,
.filter-section .form-control:focus {
  background-color: #0a0a0a;
  border-color: #ffc107;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* Select dropdown seçenekleri */
.filter-section .form-select option {
  background-color: #1a1a1a;
  color: #fff;
}

/* ============================================ */
/* BADGE STİLLERİ (BADGE STYLES) */
/* ============================================ */

/* Öne çıkan ürün badge'i */
.badge-featured {
  /* Sağ üst köşe */
  position: absolute;
  top: 10px;
  right: 10px;

  /* Sarı arka plan */
  background-color: #ffc107;

  /* Siyah metin */
  color: #000;

  /* İç boşluk */
  padding: 0.35rem 0.65rem;

  /* Yuvarlatılmış köşeler */
  border-radius: 20px;

  /* Küçük font */
  font-size: 0.75rem;

  /* Kalın yazı */
  font-weight: 600;

  /* Üstte görünsün */
  z-index: 1;
}

/* ============================================ */
/* SAYFALAMA (PAGINATION) */
/* ============================================ */

/* Sayfa linkleri */
.pagination .page-link {
  /* Koyu arka plan */
  background-color: #1a1a1a;

  /* Kenarlık */
  border-color: #333;

  /* Sarı metin */
  color: #ffc107;
}

/* Sayfa linki hover */
.pagination .page-link:hover {
  /* Sarı arka plan */
  background-color: #ffc107;
  border-color: #ffc107;

  /* Siyah metin */
  color: #000;
}

/* Aktif sayfa */
.pagination .page-item.active .page-link {
  /* Sarı arka plan */
  background-color: #ffc107;
  border-color: #ffc107;

  /* Siyah metin */
  color: #000;
}

/* ============================================ */
/* SEPET VE SİPARİŞ GÖRSELLERİ */
/* ============================================ */

/* Sepet ve sipariş sayfalarındaki ürün görselleri */
.cart-item-image img,
.cart-dropdown-item img,
.order-item-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

/* Sepet dropdown'daki küçük görseller */
.cart-dropdown-item img {
  width: 60px;
  height: 60px;
}

/* Sipariş takip sayfasındaki görseller */
.order-item-image img {
  width: 100px;
  height: 100px;
}

/* Tüm ürün görsellerini kare ve cover yap */
img[alt*="ürün"],
img[alt*="product"],
.product-image,
.cart-image,
.order-image {
  object-fit: cover !important;
  aspect-ratio: 1 / 1;
}

/* ============================================ */
/* DYNAMIC COLOR PALETTE INTEGRATION */
/* ============================================ */

/* Note: CSS variables are overridden dynamically via PHP in the HTML head section */

/* Apply color palette to main site elements */
.section-title {
  color: var(--color-2) !important;
}

.section-title::after {
  background: linear-gradient(90deg, var(--color-2), transparent) !important;
}

.price {
  color: var(--color-2) !important;
}

.btn-warning {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
}

.btn-warning:hover {
  background-color: var(--color-6) !important;
  border-color: var(--color-6) !important;
}

.btn-outline-warning:hover {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
}

.cart-btn {
  background-color: var(--color-2) !important;
}

.cart-btn:hover {
  background-color: var(--color-6) !important;
}

.promo-icon {
  color: var(--color-2) !important;
}

.promo-card:hover {
  border-color: var(--color-2) !important;
}

.pagination .page-link {
  color: var(--color-2) !important;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
}

.badge-featured {
  background-color: var(--color-2) !important;
}

.filter-section .form-control:focus,
.filter-section .form-select:focus {
  border-color: var(--color-2) !important;
  box-shadow: 0 0 0 0.2rem rgba(232, 80, 1, 0.25) !important;
}

/* ============================================ */
/* ÜRÜN AÇIKLAMALARI RENK DÜZELTMESİ */
/* ============================================ */

/* Ürün açıklamalarının beyaz görünmesi için text-muted sınıfını beyaz yap */
.text-muted {
  color: #fff !important;
}

/* Ürün kartlarındaki açıklamalar için özel stil */
.product-card .small.text-muted {
  color: #fff !important;
}

/* ============================================ */
/* DYNAMIC NAVIGATION AND FOOTER COLORS */
/* ============================================ */

/* Navbar background and text colors - Using contrasting colors */
.navbar-dark.bg-dark {
  background: linear-gradient(135deg, var(--color-1) 0%, var(--color-3) 100%) !important;
  color: #ffffff !important; /* Fixed white text for dark backgrounds */
}

.navbar-dark .navbar-brand {
  color: #ffffff !important; /* Fixed white for contrast */
}

.navbar-dark .nav-link {
  color: #ffffff !important; /* Fixed white for contrast */
}

.navbar-dark .nav-link:hover {
  color: var(--color-2) !important; /* Accent color for hover */
}

.navbar-dark .nav-link.active {
  color: var(--color-2) !important; /* Accent color for active */
}

/* Button colors with proper contrast */
.btn-outline-warning {
  border-color: var(--color-2) !important;
  color: var(--color-2) !important;
  background-color: transparent !important;
}

.btn-outline-warning:hover {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
  color: #ffffff !important; /* White text on colored background */
}

.btn-outline-light {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background-color: transparent !important;
}

.btn-outline-light:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--color-1) !important; /* Dark text on light background */
}

.btn-warning {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
  color: #ffffff !important; /* White text on colored background */
}

.btn-warning:hover {
  background-color: var(--color-6) !important;
  border-color: var(--color-6) !important;
  color: #ffffff !important; /* White text on colored background */
}

/* Footer colors with proper contrast */
.footer {
  background-color: var(--color-1) !important;
  color: #ffffff !important; /* Fixed white text for dark backgrounds */
}

.footer h5 {
  color: var(--color-2) !important; /* Accent color for headings */
}

.footer-links a {
  color: #ffffff !important; /* White text for links */
}

.footer-links a:hover {
  color: var(--color-2) !important; /* Accent color for hover */
}

.footer .text-secondary {
  color: #cccccc !important; /* Light gray for secondary text */
}

.footer .text-warning {
  color: var(--color-2) !important; /* Accent color */
}

.footer .btn-outline-warning {
  border-color: var(--color-2) !important;
  color: var(--color-2) !important;
  background-color: transparent !important;
}

.footer .btn-outline-warning:hover {
  background-color: var(--color-2) !important;
  border-color: var(--color-2) !important;
  color: #ffffff !important; /* White text on colored background */
}

/* ============================================ */
/* DOSYA SONU */
/* ============================================ */