/* ============================================================
   SİTE GELİŞTİRMELERİ
   - Profesyonel sayfa geçişleri
   - Mobil uyum optimizasyonları
   - WhatsApp yüzen iletişim butonu
   Mevcut tasarımı bozmaz; yalnızca iyileştirir.
   ============================================================ */

:root {
  --wa-green: #25D366;
  --wa-green-dark: #1ebe5d;
  --accent: #F96D00;
  --dark: #2A3F54;
}

/* --- Yatay kaymayı (titreyen scroll) engelle --- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --- Hero sol dikey başlık (.vr) görünürlüğü --- */
.hero h3.vr {
  color: rgba(255, 255, 255, 0.65) !important;
  z-index: 3 !important;
}


/* --- Yumuşak kaydırma (anchor geçişleri) --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   SAYFA GEÇİŞLERİ
   ============================================================ */

/* Sayfa açılış animasyonu */
body.page-fade-in {
  animation: pageFadeIn .6s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sayfadan ayrılış animasyonu
   Not: body'ye transform UYGULANMAZ; aksi halde position:fixed öğeler
   (WhatsApp butonu gibi) viewport yerine body'ye sabitlenir. */
body.is-leaving {
  opacity: 0;
  transition: opacity .35s ease;
}

/* Geçiş örtüsü */
#page-transition {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2A3F54, #1b2a38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
#page-transition.active {
  opacity: 1;
  visibility: visible;
}
#page-transition .pt-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25);
  border-top-color: var(--accent);
  animation: ptSpin .8s linear infinite;
}
@keyframes ptSpin { to { transform: rotate(360deg); } }

/* Yumuşak buton/kart hover geçişleri */
.btn,
.services-wrap,
.blog-entry .block-20,
.blog-entry .heading a {
  transition: all .3s ease !important;
}
.btn:hover { transform: translateY(-2px); }
.blog-entry:hover .block-20 { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  body.page-fade-in { animation: none; }
  #page-transition { display: none !important; }
  .btn:hover, .blog-entry:hover .block-20 { transform: none; }
}

/* ============================================================
   WHATSAPP YÜZEN BUTON
   ============================================================ */
.wa-float {
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-float:hover {
  color: #fff !important;
  background: var(--wa-green-dark);
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .55);
  text-decoration: none;
  animation-play-state: paused;
}
/* Nabız efekti: transform:scale layout taşması (yatay scroll) yaptığı için
   bunun yerine box-shadow kullanıyoruz; box-shadow asla kaydırma oluşturmaz. */
.wa-float .wa-pulse { display: none; }
.wa-float {
  animation: waGlow 2.2s ease-out infinite;
}
@keyframes waGlow {
  0%   { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37, 211, 102, 0); }
}

.wa-float .wa-tip {
  position: absolute;
  right: 74px;
  white-space: nowrap;
  background: #fff;
  color: #333;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.wa-float .wa-tip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
}
.wa-float:hover .wa-tip {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .wa-float .wa-pulse { animation: none; }
}

/* ============================================================
   INSTAGRAM YÜZEN BUTON (WhatsApp'ın üstünde istiflenir)
   ============================================================ */
.ig-float {
  position: fixed !important;
  right: 22px !important;
  bottom: 94px !important;
  left: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ig-float:hover {
  color: #fff !important;
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(214, 36, 159, .55);
  text-decoration: none;
}
.ig-float .ig-tip {
  position: absolute;
  right: 74px;
  white-space: nowrap;
  background: #fff;
  color: #333;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.ig-float .ig-tip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 0; height: 0;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
}
.ig-float:hover .ig-tip {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MENÜ GÖRÜNÜRLÜK & ESTETİK (masaüstü)
   ============================================================ */
@media (min-width: 992px) {
  #ftco-navbar.ftco_navbar {
    background: rgba(42, 63, 84, 0.92) !important;
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
    transition: background .3s ease, box-shadow .3s ease;
  }
  #ftco-navbar.ftco_navbar.scrolled {
    background: rgba(42, 63, 84, 0.98) !important;
  }
  /* Menü tek satırda kalsın (7 öğe + geniş logo taşmasın) */
  #ftco-navbar .navbar-brand img { width: 230px !important; height: 58px !important; }
  #ftco-navbar .navbar-nav { flex-wrap: nowrap; }
  #ftco-navbar .navbar-nav .nav-link {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: .2px;
    font-size: 15px;
    white-space: nowrap;
    opacity: .95;
    position: relative;
    padding: 10px 11px !important;
  }
  #ftco-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 11px; right: 11px; bottom: 5px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
  }
  #ftco-navbar .navbar-nav .nav-link:hover::after,
  #ftco-navbar .navbar-nav .nav-item.active .nav-link::after {
    transform: scaleX(1);
  }
  #ftco-navbar .navbar-nav .nav-link:hover,
  #ftco-navbar .navbar-nav .nav-item.active .nav-link {
    color: #ffffff !important;
    opacity: 1;
  }
}

/* ============================================================
   MOBİL UYUM OPTİMİZASYONLARI
   ============================================================ */

/* Yatay taşmayı önle */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Görseller her zaman esnek */
img { max-width: 100%; height: auto; }

/* Harita gömülü alanı esnek */
iframe { max-width: 100%; }

/* Tablet ve altı: menü ve dokunma hedefleri */
@media (max-width: 991.98px) {
  #ftco-navbar .navbar-collapse {
    background: rgba(17, 24, 32, .96);
    border-radius: 10px;
    padding: 8px 14px;
    margin-top: 10px;
  }
  #ftco-navbar .navbar-nav .nav-link {
    padding: 13px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  #ftco-navbar .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: 0;
  }
  .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Telefon: tipografi ve boşluk düzenlemeleri */
@media (max-width: 767.98px) {
  /* iOS'ta otomatik yakınlaştırmayı önlemek için form fontu 16px */
  .form-control,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important;
  }

  .ftco-section { padding-top: 3em; padding-bottom: 3em; }

  .heading-section h2 { font-size: 26px; }

  .hero .slider-text h1,
  .hero-wrap .bread,
  h1.mb-4 { font-size: 30px; line-height: 1.2; }

  .slider-text .subheading { font-size: 14px; }

  /* Hizmet kartı görsel yüksekliği */
  .blog-entry .block-20 { height: 220px; background-size: cover; }

  /* Hizmet detay yan sütunu üstten boşluk */
  .sidebar.pl-lg-5 { padding-left: 15px !important; margin-top: 30px; }
}

/* Küçük telefonlar: WhatsApp butonu ve ipucu */
@media (max-width: 575.98px) {
  .wa-float {
    width: 54px;
    height: 54px;
    font-size: 30px;
    right: 16px;
    bottom: 16px;
  }
  .wa-float .wa-tip { display: none; }

  .ig-float {
    width: 54px;
    height: 54px;
    font-size: 28px;
    right: 16px;
    bottom: 82px;
  }
  .ig-float .ig-tip { display: none; }

  .container { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   SIKÇA SORULAN SORULAR (SSS) AKORDEON
   ============================================================ */
.faq-item {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.faq-item[open] {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 54px 18px 22px;
  font-weight: 700;
  font-size: 17px;
  color: #2A3F54;
  position: relative;
  outline: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  transition: transform .25s ease;
}
.faq-item[open] > summary::after {
  content: "\2013";
  transform: translateY(-50%) rotate(180deg);
}
.faq-item > summary:hover { color: var(--accent); }
.faq-item .faq-answer {
  padding: 0 22px 20px 22px;
  color: #555;
  line-height: 1.7;
}
.service-areas h3 { color: #2A3F54; }
.service-areas p { color: #777; font-weight: 600; }

@media (max-width: 575.98px) {
  .faq-item > summary { font-size: 15px; padding: 15px 48px 15px 16px; }
  .faq-item .faq-answer { padding: 0 16px 16px 16px; }
}