/* ==========================================
   🦷 ÖzgeDent Footer - Responsive Optimizasyon
========================================== */

.footer {
  --footer-background: #54755e;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
  width: 100%;
  font-family: 'Poppins', sans-serif !important;
}

/* 🫧 Baloncuk Efekti Konteyneri */
.footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}

.footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 50%);
  background: var(--footer-background);
  border-radius: 100%;
  animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
             bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}

/* ==========================================
   💻 MASAÜSTÜ FOOTER (1025px ve üzeri)
========================================== */
@media (min-width: 1025px) {
  .footer .content {
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 3rem;
    padding: 3rem 4rem;
    background: var(--footer-background);
    align-items: center;
  }

  /* Sol taraf: Üç sütunlu bilgi grupları */
  .footer .content > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5rem;
  }

  /* Sağ taraf: Logo ve copyright dikey */
  .footer .content > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  /* Her bir bilgi grubu (Hızlı Erişim, Adres, İletişim) */
  .footer .content > div:first-child > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Logo boyutu */
  .footer .content .image {
    width: 7rem;
    height: 7rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }
}

/* ==========================================
   📱 TABLET OPTİMİZASYONU (768px - 1024px)
========================================== */
@media (max-width: 1024px) and (min-width: 768px) {
  .footer .content {
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr; /* Tek sütun */
    grid-gap: 2.5rem;
    padding: 2.5rem 2rem;
    background: var(--footer-background);
    align-items: center;
    text-align: center;
  }

  /* Üstte: Bilgi grupları yatay olarak 3 sütun */
  .footer .content > div:first-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
    gap: 2rem;
    justify-items: center;
    width: 100%;
  }

  /* Her bir bilgi grubu */
  .footer .content > div:first-child > div {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    width: 100%;
  }

  /* Altta: Logo ve copyright */
  .footer .content > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1rem;
  }

  /* Logo boyutu - tablet için biraz küçült */
  .footer .content .image {
    width: 6rem;
    height: 6rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }

  /* Başlıklar */
  .footer .content b {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
  }

  /* Link ve metinler */
  .footer .content a,
  .footer .content p {
    font-size: 0.9rem;
  }
}

/* ==========================================
   📱 MOBİL OPTİMİZASYONU (767px ve altı)
========================================== */
@media (max-width: 767px) {
  .footer .content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2rem 1.5rem;
    background: var(--footer-background);
    align-items: center;
    text-align: center;
  }

  /* Bilgi grupları: Dikey olarak alt alta */
  .footer .content > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
  }

  /* Her bir bilgi grubu */
  .footer .content > div:first-child > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
  }

  /* Logo ve copyright */
  .footer .content > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
  }

  /* Logo boyutu - mobil için daha küçük */
  .footer .content .image {
    width: 5.5rem;
    height: 5.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }

  /* Başlıklar */
  .footer .content b {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
  }

  /* Link ve metinler */
  .footer .content a,
  .footer .content p {
    font-size: 0.88rem;
    line-height: 1.7;
  }

  /* Copyright yazısı */
  .footer .content > div:last-child p {
    font-size: 0.8rem;
  }
}

/* ==========================================
   📱 EKSTRA KÜÇÜK MOBİL (480px ve altı)
========================================== */
@media (max-width: 480px) {
  .footer .content {
    padding: 1.8rem 1.2rem;
    gap: 2rem;
  }

  .footer .content > div:first-child {
    gap: 2rem;
  }

  /* Logo daha da küçük */
  .footer .content .image {
    width: 5rem;
    height: 5rem;
  }

  /* Başlıklar */
  .footer .content b {
    font-size: 1rem;
  }

  /* Link ve metinler */
  .footer .content a,
  .footer .content p {
    font-size: 0.85rem;
  }

  /* Copyright */
  .footer .content > div:last-child p {
    font-size: 0.75rem;
  }

  /* Adres paragrafı: Uzun satırları düzgün göster */
  .footer .content > div:first-child > div p {
    max-width: 250px;
  }
}

/* ==========================================
   🎨 ORTAK STİLLER (Tüm Ekranlar)
========================================== */

/* Metin Stilleri */
.footer .content a,
.footer .content p {
  color: #f5f7fa;
  text-decoration: none;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.6;
  transition: opacity 0.3s ease;
}

.footer .content a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Başlık Stilleri */
.footer .content b {
  color: white;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  display: block;
  text-transform: none;
}

.footer .content p {
  margin: 0;
}

/* Copyright - whitespace ayarı */
.footer .content > div:last-child p {
  white-space: normal; /* Mobilde satır kırılmasına izin ver */
  font-family: 'Poppins', sans-serif !important;
}

/* ==========================================
   🫧 BALONCUK ANİMASYONLARI
========================================== */

@keyframes bubble-size {
  0%, 75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}

/* ==========================================
   ⚡ PERFORMANS İYİLEŞTİRMESİ
========================================== */

/* Mobilde baloncuk sayısını azalt (opsiyonel) */
@media (max-width: 767px) {
  .footer .bubbles .bubble:nth-child(n+65) {
    display: none; /* İlk 64 baloncuğu göster, performans için */
  }
}