/* ==========================================================================
   efektler.css  —  Alsancak Prefabrik görsel iyileştirmeleri
   TAMAMEN EKLENTİ niteliğindedir. Site yapısı/HTML/URL/SEO'ya dokunmaz.
   Geri alma: head.php'deki efektler.css ve script.php'deki efektler.js
   satırlarını silmek yeterlidir.
   Tüm animasyonlar prefers-reduced-motion: reduce altında kapanır.
   Yazan tarih: 2026-10-07
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HERO — KEN BURNS (yavaş zoom) + başlık/açıklama/CTA yükleme animasyonu
   -------------------------------------------------------------------------- */

/* Ken Burns katmanı (JS ile her .tp-hero-area içine ilk çocuk olarak eklenir).
   z-index:-2 -> .tp-overlay::before (-1, koyu katman) altında kalır,
   içerik her ikisinin üstünde kalır. Alan kendi background'u yedek olarak durur. */
.tp-hero-area .efk-hero-kb {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
  animation: efkKenBurns 9s ease-out both;
}
@keyframes efkKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Hero başlık + açıklama: sayfa açılışında alttan yumuşak fade-in.
   Başlangıç durumu opacity:0 (animation fill-mode: both ile), JS gerekmez. */
.tp-hero-content .tp-hero-title {
  animation: efkFadeUp .7s cubic-bezier(.22,.61,.36,1) both;
}
.tp-hero-content > p.tp-text-white {
  animation: efkFadeUp .7s cubic-bezier(.22,.61,.36,1) .15s both;
}
.tp-hero-content .efk-hero-cta {
  animation: efkFadeUp .7s cubic-bezier(.22,.61,.36,1) .3s both;
}
@keyframes efkFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero başlık OKUNABİLİRLİK düzeltmesi (ÖN-MEVCUT SORUN — rapora bakınız).
   Temanın kendi main.css'i 768–1399px arası genişliklerde .tp-hero-title için
   180–270px gibi aşırı büyük değerler atıyor (tema 1-2 kelimelik kısa başlık
   için tasarlanmış; buraya uzun bir başlık girildiğinden satırlar üst üste
   binip hero'yu taşırıyor ve CTA butonlarını örtüyor). Aşağıdaki kural SADECE
   bu aralıkta font boyutunu okunabilir seviyeye çeker. ≥1400px ve mobil
   (≤767px) temanın kendi ölçülerinde bırakılır. Tamamen eklenti; istenmezse
   bu blok silinince temanın orijinal davranışına dönülür. */
@media (min-width: 768px) and (max-width: 1399.98px) {
  .tp-hero-area .tp-hero-title {
    font-size: clamp(34px, 3.6vw, 54px) !important;
    line-height: 1.12 !important;
    padding-top: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   2) HERO — CTA butonları (JS ile açıklamadan sonra eklenir)
   -------------------------------------------------------------------------- */
.efk-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 28px;
}
.efk-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--tp-theme-font, "Montserrat", sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 50px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.efk-cta-btn svg { flex: 0 0 auto; }

/* Birincil: site mavisi (dolgulu) */
.efk-cta-primary {
  background: #2c5fa3;
  color: #fff;
  box-shadow: 0 10px 26px rgba(44, 95, 163, .28);
}
.efk-cta-primary:hover {
  background: #163d6b;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(44, 95, 163, .38);
}

/* İkincil: çerçeveli / şeffaf (beyaz) */
.efk-cta-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}
.efk-cta-secondary:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
}

/* Mobil: butonlar tam genişlik, alt alta */
@media (max-width: 575.98px) {
  .efk-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .efk-hero-cta .efk-cta-btn { width: 100%; }
}

/* Eski "İletişime Geçin" butonunu SADECE hero içinde gizle (yeni CTA'lar onun
   yerini aldı; üç buton kalabalık görünüyordu). Sitenin diğer yerlerindeki
   iletişim butonlarına dokunulmaz. Mobil hero'daki "Yol Tarifi" butonu kalır:
   bu yüzden masaüstünde tüm .hero-btn gizlenir (tek içerik İletişime Geçin),
   mobilde yalnızca iletisim bağlantısı gizlenir. */
.hero-desktop .hero-btn { display: none !important; }
.hero-mobile .hero-btn a[href="iletisim"] { display: none !important; }

/* --------------------------------------------------------------------------
   4) MODEL KARTLARI — hover (yalnızca fare/ince işaretçi cihazlarda)
      Liste sayfaları (.tpproject): foto zoom + kart kalkışı + gölge +
      alttan kayan bilgi şeridi (mevcut model adı + "İncele →").
      Ana sayfa vitrin paneli (.tp-portfolio-long): yalnızca hafif foto zoom
      (pinli yatay kaydırıcı + "Gözat" imleci korunur).
   -------------------------------------------------------------------------- */

/* Şerit her zaman DOM'da (JS ile eklenir) ama görünürlük hover'a bağlı.
   .tpproject__thumb zaten p-relative + fix(overflow:hidden). */
.efk-card-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 20, 40, .92) 0%, rgba(10, 20, 40, .72) 55%, rgba(10, 20, 40, 0) 100%);
  transform: translateY(101%);
  opacity: 0;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.efk-card-strip .efk-card-name {
  font-family: var(--tp-theme-font, "Montserrat", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.efk-card-strip .efk-card-more {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: .95;
}

/* Liste kartı foto çerçevesi: zoom için geçiş */
.tpproject__thumb .anim-zoomin { transition: transform .45s ease; will-change: transform; }

@media (hover: hover) and (pointer: fine) {
  /* kart kalkışı + gölge */
  .tpproject { transition: transform .4s ease, box-shadow .4s ease; }
  .tpproject-link:hover .tpproject {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(10, 20, 40, .18);
  }
  /* foto zoom */
  .tpproject-link:hover .tpproject__thumb .anim-zoomin { transform: scale(1.06); }
  /* bilgi şeridi aç */
  .tpproject-link:hover .efk-card-strip { transform: translateY(0); opacity: 1; }

  /* Ana sayfa vitrin paneli: yalnızca hafif foto zoom */
  .tp-portfolio-long .cursor-hide { overflow: hidden; border-radius: 20px; }
  .tp-portfolio-long-bg { transition: transform .5s ease; will-change: transform; }
  .tp-portfolio-long-item:hover .tp-portfolio-long-bg { transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   6) WHATSAPP — nabız (pulse) halkası
      .als-fixed-btn overflow:hidden -> ::after halkası KIRPILIR; bu yüzden
      KIRPILMAYAN box-shadow halkası kullanılır (konum/link değişmez).
      Mobil dahil çalışır; sadece reduced-motion ile kapanır.
   -------------------------------------------------------------------------- */
.als-whatsapp {
  animation: efkWaPulse 3s ease-out infinite;
}
@keyframes efkWaPulse {
  0% {
    box-shadow: 0 12px 30px rgba(37, 211, 102, .25),
                0 0 0 0 rgba(37, 211, 102, .55);
  }
  70% {
    box-shadow: 0 12px 30px rgba(37, 211, 102, .25),
                0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 12px 30px rgba(37, 211, 102, .25),
                0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* --------------------------------------------------------------------------
   HAREKET AZALTMA — tüm animasyon/geçişleri kapat (erişilebilirlik)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tp-hero-area .efk-hero-kb { animation: none !important; transform: none !important; }
  .tp-hero-content .tp-hero-title,
  .tp-hero-content > p.tp-text-white,
  .tp-hero-content .efk-hero-cta {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .als-whatsapp { animation: none !important; }
  .efk-card-strip,
  .tpproject,
  .tpproject__thumb .anim-zoomin,
  .tp-portfolio-long-bg,
  .efk-cta-btn { transition: none !important; }
}