/* ============================================================
   FOOTER.CSS — Kobi Proje Danışmanlık
   ============================================================
   4 sütunlu footer düzeni (logo+tanıtım, hızlı erişim,
   hizmetler, iletişim), link hover efektleri, sosyal medya
   ikonları, alt bar (copyright), responsive kırılma noktaları.
   
   BEM isimlendirme kuralı tutarlı şekilde uygulanır.
   ============================================================ */

/* ============================================================
   1. FOOTER ANA YAPI
   ============================================================ */
.footer {
  background: linear-gradient(
    160deg,
    var(--color-bg-dark) 0%,
    #0a1535 40%,
    #0f1d45 100%
  );
  color: rgba(255, 255, 255, 0.8);
  padding-top: var(--space-3xl);
  padding-bottom: 0;
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   2. 4 SÜTUNLU FOOTER GRID
   ============================================================ */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

/* ============================================================
   3. SÜTUN 1 — Logo + Tanıtım + Sosyal Medya
   ============================================================ */
.footer__brand {
  max-width: 320px;
}

.footer__logo {
  display: inline-block;
  margin-bottom: var(--space-lg);
}

.footer__logo img {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer__intro {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-lg);
}

/* Sosyal Medya İkonları */
.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

.footer__social-link:hover {
  transform: translateY(-2px);
}

/* Platform marka renkleri */
.footer__social-link--instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: transparent;
  color: #ffffff;
}

.footer__social-link--linkedin:hover {
  background-color: #0077b5;
  border-color: #0077b5;
  color: #ffffff;
}

.footer__social-link--facebook:hover {
  background-color: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
}

.footer__social-link--twitter:hover {
  background-color: #1da1f2;
  border-color: #1da1f2;
  color: #ffffff;
}


/* ============================================================
   4. SÜTUN BAŞLIKLARI
   ============================================================ */
.footer__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-sm);
}

.footer__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--color-secondary);
  border-radius: 1px;
}

/* ============================================================
   5. FOOTER LİNK LİSTELERİ — Hover Efektleri
   ============================================================ */
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__link-item {
  margin-bottom: var(--space-sm);
}

.footer__link {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.65);
  padding: 2px 0;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-secondary-light);
  transform: translateX(4px);
}

/* ============================================================
   6. SÜTUN 4 — İLETİŞİM BİLGİLERİ
   ============================================================ */
.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
}

.footer__contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-secondary);
}

.footer__contact-link {
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast);
}

.footer__contact-link:hover {
  color: var(--color-secondary-light);
}

/* WhatsApp butonu */
.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: #25d366;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.footer__whatsapp svg {
  width: 18px;
  height: 18px;
}

.footer__whatsapp:hover {
  background-color: #1ebe5d;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ============================================================
   7. ALT BAR — Copyright + Gizlilik/Kullanım Linkleri
   ============================================================ */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer__copyright {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer__legal-link {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.footer__legal-link:hover {
  color: var(--color-secondary-light);
}

.footer__legal-separator {
  color: rgba(255, 255, 255, 0.25);
  font-size: var(--font-size-xs);
}

/* ============================================================
   8. RESPONSIVE KIRILMA NOKTALARI
   ============================================================ */

/* 576px+ — 2x2 grid */
@media (min-width: 576px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* 992px+ — 4 sütun */
@media (min-width: 992px) {
  .footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: var(--space-2xl);
  }

  .footer {
    padding-top: var(--space-4xl);
  }
}