/* ========================================
   FOOTER STYLES - ASREMAN PROJECT
   Modern footer with video background
   ======================================== */

.site-footer {
  background-color: #0e434b;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* ========================================
   VIDEO BACKGROUND
   YouTube video as footer background
   ======================================== */
.footer-video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.footer-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 0.8;
  filter: blur(1px);
  z-index: 1;
  pointer-events: none;
}

.footer-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(55 55 55 / 85%) 0%, rgb(75 75 75 / 89%) 50%, rgb(49 49 49 / 90%) 100%);
  z-index: 2;
}

/* ========================================
   FOOTER CONTAINER
   Flexbox layout: Logo (left) + Content wrapper (right)
   ======================================== */
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 3rem;
  position: relative;
  z-index: 3;
}

/* ========================================
   LOGO SECTION (Left - Fixed width)
   ======================================== */
.footer-left {
  flex: 0 0 auto;
}

.footer-left .footer-logo {
  width: 275px;
  height: auto;
  display: block;
}

/* ========================================
   RIGHT WRAPPER (Contact + Menu - Aligned right)
   ======================================== */
.footer-right-wrapper {
  display: flex;
  gap: 5rem;
  align-items: start;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.footer-center,
.footer-right {
  flex: 0 0 auto;
}

/* ========================================
   SECTION TITLES
   ======================================== */
.footer-center .contact-title,
.footer-right .menu-title {
  font-size: 1.5rem;
  letter-spacing: .02rem;
  margin-bottom: 1.25rem;
  color: #cfcfcf;
}

/* ========================================
   CONTACT LIST (Center)
   Icon font integration
   ======================================== */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  max-width: 280px; /* İletişim genişliğini sınırla */
}

.contact-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: .75rem;
}

/* Adres satırını wrap yap */
.contact-list li span:not(.contact-icon) {
  word-break: break-word;
  line-height: 1.5;
}

/* Icon styling - using project's icon font */
.contact-icon {
  width: 24px;
  height: 24px;
  color: #cfcfcf;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0; /* Icon küçülmesin */
}

/* ========================================
   FOOTER LINKS
   Animated underline effect (matches header)
   ======================================== */
.footer-link {
  color: #fff;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: max-content; /* Alt çizgi metin genişliği kadar */
  transition: color .3s ease;
}

/* Alttan kayan çizgi animasyonu - Header ile aynı */
.footer-link::after {
  content: "";
  position: absolute;
  top: 102.5%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s cubic-bezier(0.6, 0, 0.4, 1);
}

.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ========================================
   MENU GRID (Right)
   2 column grid layout
   ======================================== */
.footer-right .menu-grid {
  display: grid;
  gap: 1.5rem 4rem;
  /* Masaüstünde 2 kolon */
  grid-template-columns: repeat(2, minmax(160px, auto));
  justify-items: start; /* Grid item'ları içeriğe göre hizala */
}

.footer-right .menu-grid a {
  font-size: 1.1rem;
  white-space: nowrap; /* Desktop'ta tek satırda */
}

.footer-container a, .footer-container span {
    font-size: 1.1rem;
  }

/* İletişim bölümündeki linkler grid içinde genişlemesin */
.contact-list li .footer-link {
  justify-self: start;
  width: max-content;
}

/* ========================================
   FOOTER BOTTOM
   Copyright and legal links
   ======================================== */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.2rem 2.5rem 2.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  color: #cfcfcf;
  position: relative;
  z-index: 3;
}

.footer-legal {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-legal a {
  color: #cfcfcf;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet - Alt çizgi animasyonunu kaldır */
@media (max-width: 900px) {
  .footer-link::after {
    display: none;
  }
}

/* Tablet - Stack layout */
@media (max-width: 1200px) {
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
  }

  .footer-left {
    align-self: flex-start;
  }

  .footer-right-wrapper {
    width: 100%;
    justify-content: flex-start;
    gap: 2.5rem;
  }
}

/* Mobile - Full stack */
@media (max-width: 768px) {

    .footer-center, .footer-right {
        width: 100%;
    }

  .footer-container {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-left .footer-logo {
    width: 200px;
  }

  .footer-right-wrapper {
    flex-direction: column;
    gap: 2rem;
    width: 100%;
  }

  /* Mobile: Menü grid'i 2 kolona çevir */
  .footer-right .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }

  .footer-right .menu-grid a {
    font-size: 0.95rem;
    white-space: normal; /* Mobilde wrap olabilir */
    word-break: break-word;
  }

  /* İletişim genişliğini mobilde full yap */
  .contact-list {
    max-width: 100%;
  }

  .footer-bottom {
    padding: 1rem 2.5rem 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  /* Mobilde video görünürlüğünü azalt */
  .footer-bg-video {
    opacity: 0.2;
    filter: blur(2px);
  }

  .footer-video-overlay {
    background: linear-gradient(135deg, rgb(55 55 55 / 85%) 0%, rgb(75 75 75 / 89%) 50%, rgb(49 49 49 / 90%) 100%)
  }
}

/* Extra Small Mobile - Çok küçük ekranlar */
@media (max-width: 480px) {
  .footer-right .menu-grid {
    gap: 0.75rem 1rem;
  }

  .footer-right .menu-grid a {
    font-size: 0.9rem;
  }

  .footer-container {
    padding: 3rem 1.5rem;
  }

  .footer-left .footer-logo {
    width: 160px;
  }
}

/* 4K Screens - Video scale artır */
@media (min-width: 2000px) {
  .footer-bg-video {
    transform: translate(-50%, -50%) scale(3.4);
  }
}