/* ============================================================
   footer.css — Footer (Alt Bilgi) Stilleri
   Site geneli footer bölümü: logo, hızlı linkler,
   bekkimya.com yönlendirmesi ve telif.
   ============================================================ */

/* --- Ana Footer Container --- */

/* Footer arka plan — koyu tema */
.footer {
  background-color: var(--color-dark);
  color: var(--color-gray-300);
  /* Üst boşluk */
  padding-top: var(--space-4xl);
  padding-bottom: 0;
}

/* Footer iç düzeni — grid ile sütunlar */
.footer-grid {
  display: grid;
  /* Mobilde tek sütun */
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  /* Alt boşluk — telif alanından ayırır */
  padding-bottom: var(--space-3xl);
}

/* --- Footer Logo & Tanıtım Sütunu --- */

/* Sol sütun — logo ve kısa açıklama */
.footer-brand {
  /* Birinci sütun genişliği biraz fazla olsun */
  max-width: 350px;
}

/* Footer logo metni */
.footer-logo {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-md);
  display: inline-block;
}

/* Footer logo vurgu rengi */
.footer-logo span {
  color: var(--color-primary);
}

/* Footer açıklama metni */
.footer-brand p {
  font-size: var(--font-size-small);
  color: var(--color-gray-400);
  line-height: var(--line-height-loose);
}

/* --- Footer Link Sütunları --- */

/* Link grubu başlığı */
.footer-heading {
  margin-top: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  /* Başlık altı kırmızı çizgi */
  position: relative;
  padding-bottom: var(--space-sm);
}

/* Logo gri alt çizgi */
.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
}

/* Footer link listesi */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Footer linkleri */
.footer-links a {
  color: var(--color-gray-400);
  font-size: var(--font-size-small);
  /* Dokunma hedefi en az 24 px (WCAG 2.5.8). */
  display: inline-block;
  padding: 2px 0;
  /* Hover geçişi */
  transition: color var(--transition-fast),
              padding-left var(--transition-fast);
}

/* Hover — renk değişimi ve sağa kayma efekti */
.footer-links a:hover {
  color: var(--color-white);
  /* Sağa kayma */
  padding-left: 6px;
}

/* --- bekkimya.com Yönlendirme Kutusu --- */

/* Dikkat çekici CTA kutusu — koyu gri ton */
.footer-cta {
  background: linear-gradient(135deg,
    rgba(145, 147, 150, 0.12) 0%,
    rgba(145, 147, 150, 0.04) 100%
  );
  /* Kenar çizgisi */
  border: 1px solid rgba(145, 147, 150, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

/* CTA kutusu metni */
.footer-cta p {
  color: var(--color-gray-300);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-small);
}

/* --- Footer Alt Bar (Telif) --- */

/* Telif ve yasal bilgi çubuğu */
.footer-bottom {
  /* Üst kenarlık — ayırıcı */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-lg) 0;
  /* İçerik hizalama */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* Telif metni */
.footer-bottom p {
  font-size: var(--font-size-xs);
  /* Koyu zeminde en az 4.5:1 kontrast (WCAG 1.4.3). */
  color: var(--color-gray-400);
}

/* Telif metnindeki link */
.footer-bottom a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

/* Telif link hover */
.footer-bottom a:hover {
  color: var(--color-primary);
}

/* --- Responsive: Tablet --- */

@media (min-width: 768px) {

  /* Tablet'te 2 sütunlu grid */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  /* Telif çubuğu yatay hizalama */
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --- Responsive: Masaüstü --- */

@media (min-width: 1024px) {

  /* Masaüstünde 4 sütunlu grid */
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

/* --- Yasal Sayfa Link Şeridi --- */

/* Telif çubuğunun altındaki yasal sayfa linkleri. Sayfalar artık admin'den
   eklenip silinebildiği için sayıları değişken; sabit dört link yerine
   yatay olarak sarmalanan ortalanmış bir şerit kullanılıyor.
   (.footer-links sütun yönündedir; burada satıra çevriliyor.) */
.footer-legal-links {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
  padding-bottom: var(--space-lg);
}

/* --- Panelden Yüklenen Footer Logosu --- */

/* .footer-logo varsayılan olarak METİN logosu için yazılmıştır
   (font-size/font-weight). Yönetici Site Ayarları'ndan bir logo yüklediğinde
   metin yerine görsel basılır; o durumda metin kuralları anlamsız kalır ve
   görselin kendi yüksekliği belirlenmelidir. */
.footer-logo-image {
  font-size: 0;
  line-height: 0;
}

.footer-logo-image img {
  height: 36px;
  width: auto;
  display: block;
}

/* Online mağaza sütunu üst etiketi (panelden). */
.footer-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}