/* Designed by Tamer Akdeniz - https://tamerakdeniz.com */

/* Shared custom styles & animations for static HTML pages */

/* Fade in up animation (used for hero paragraph/buttons etc.) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar (hidden but scrollable) */
html {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Floating action buttons */
.fab-container {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.fab-whatsapp {
  background: #25d366;
}

.fab-whatsapp:hover {
  background: #20bd5a;
}

.fab-call {
  background: #0f172a;
}

.fab-call:hover {
  background: #0b1323;
}

/* call popup removed */

/* Hover/interaction on cards (shared) */
.interactive-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.interactive-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.12);
  border-color: rgba(30, 41, 59, 0.15);
}

.interactive-card .interactive-icon {
  transition: color 0.25s ease, background-color 0.25s ease;
}

.interactive-card:hover .interactive-icon {
  color: #fff;
  background-color: #1e293b;
}

/* Skeleton animation for hero background */
@keyframes skeleton-shimmer {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}

#hero-skeleton {
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Hero image zoom animation */
@keyframes slowZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

#hero-image.zoom-active {
  animation: slowZoom 8s ease-out forwards;
}

/* Hero content characters slide in from left */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-char {
  display: inline;
  opacity: 0;
  animation: slideInFromLeft 0.5s ease-out forwards;
}

/* Page overlay for logo-first transition (white background, colored logo) */
.page-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  animation: overlayBgSequence 1.8s ease-out forwards;
}

.page-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes overlayBgSequence {
  from {
    opacity: 1;
    background: #ffffff;
  }
  40% {
    opacity: 1;
    background: #ffffff;
  }
  70% {
    opacity: 0.6;
    background: #e5e7eb; /* hafif gri silüet hissi */
  }
  to {
    opacity: 0;
    background: #e5e7eb;
  }
}

.overlay-logo {
  width: 160px;
  max-width: 60vw;
  animation: overlayLogoSequence 1.8s ease-out forwards;
}

@keyframes overlayLogoSequence {
  from {
    opacity: 0;
    transform: scale(0.9);
    filter: none;
  }
  40% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  70% {
    opacity: 0.8;
    transform: scale(1.02);
    filter: grayscale(1) brightness(0.1);
  }
  to {
    opacity: 0;
    transform: scale(1.04);
    filter: grayscale(1) brightness(0.05);
  }
}

/* Prevent scroll while overlay is visible */
.page-lock {
  overflow: hidden;
}

/* Top loader & skeleton bar intentionally removed per latest design */

/* Footer consistency across pages */
footer.bg-navy-dark {
  background-color: #0f172a;
  color: #fff;
}

footer.bg-navy-dark a {
  color: #cbd5e1;
}

footer.bg-navy-dark a:hover {
  color: #fff;
}