@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary-red: #cb5034;
  --primary-red-hover: #a53c29;
  --navy-dark: #17191d;
  --navy-light: #292c32;
  --text-main: #3e3935;
  --text-muted: #716a63;
  --bg-light: #faf9f7;
  --brand-glow: rgba(203, 80, 52, .18);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-main);
  background-color: #fffefd;
  overflow-x: hidden;
}

.bg-white { background-color: #fffefd; }

h1, h2, h3, h4, h5, h6 {
  color: var(--navy-dark);
  letter-spacing: -0.02em;
}

/* Classic clean cards */
.corporate-card {
  background: #fffefd;
  border: 1px solid #e5e1dc;
  border-radius: 12px;
  transition: all 0.25s ease-in-out;
}

.corporate-card:hover {
  border-color: rgba(203, 80, 52, .3);
  box-shadow: 0 18px 36px -14px rgba(29, 28, 26, .18), 0 8px 18px -12px var(--brand-glow);
  transform: translateY(-4px);
}

::selection { background: rgba(203, 80, 52, .2); color: #7c3025; }

.hero-home {
  background:
    radial-gradient(ellipse at 78% 48%, rgba(203, 80, 52, .2), transparent 36%),
    radial-gradient(ellipse at 12% 100%, rgba(190, 145, 110, .12), transparent 32%),
    linear-gradient(118deg, #15171a 0%, #202226 55%, #2a2321 100%);
}

.hero-home > .absolute:first-child {
  opacity: .55;
}

.hero-home .hero-visual > div:first-child {
  background-image: linear-gradient(120deg, #cb5034, #d69b70, #f9855e);
  opacity: .24;
}

.hero-home .hero-visual > div:nth-child(2) {
  box-shadow: 0 28px 70px -34px rgba(203, 80, 52, .42);
}

#stats-section,
#kurumsal,
#gecmisten-bugune {
  background-image: linear-gradient(135deg, rgba(203, 80, 52, .055), transparent 46%, rgba(174, 139, 107, .055));
}

.faq-item:has(.faq-trigger[aria-expanded="true"]) {
  border-color: rgba(203, 80, 52, .38);
  box-shadow: 0 16px 32px -24px rgba(203, 80, 52, .45);
}

/* Red brand button */
.btn-brand-red {
  background-color: #cb5034;
  color: #ffffff;
  transition: all 0.2s ease;
}

.btn-brand-red:hover {
  background-color: #a53c29;
  box-shadow: 0 4px 12px rgba(203, 80, 52, 0.25);
}

/* Navy brand button */
.btn-brand-navy {
  background-color: #17191d;
  color: #ffffff;
  transition: all 0.2s ease;
}

.btn-brand-navy:hover {
  background-color: #292c32;
}

/* Smooth transitions */
.portfolio-img-box img {
  transition: transform 0.4s ease;
}

.portfolio-img-box:hover img {
  transform: scale(1.05);
}

/* Modal Animation */
.modal-backdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-content-box {
  transform: scale(0.96);
  transition: transform 0.2s ease;
}

.modal-backdrop.active .modal-content-box {
  transform: scale(1);
}

/* Pulse animation for WhatsApp */
@keyframes pulse-subtle {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.wa-floating-btn {
  animation: pulse-subtle 2.5s infinite;
}

/* ========================================================
   INFINITE SYNCHRONIZED LOGO MARQUEE
   ======================================================== */
@keyframes marqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 45s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Saha Referanslarımız: %50 daha yavaş, sakin ve akıcı kayma hızı */
.marquee-track-saha {
  animation-duration: 135s !important;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* Hide scrollbars smoothly while preserving native drag/scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Portfolio carousel cards smooth styling */
.portfolio-slider-card {
  width: 320px;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .portfolio-slider-card {
    width: 360px;
  }
}
@media (min-width: 1024px) {
  .portfolio-slider-card {
    width: 380px;
  }
}

/* Subtle first impression and scroll reveals, with reduced-motion support. */
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroImageEnter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-copy > * {
  animation: heroEnter .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero-copy > *:nth-child(1) { animation-delay: .08s; }
.hero-copy > *:nth-child(2) { animation-delay: .16s; }
.hero-copy > *:nth-child(3) { animation-delay: .24s; }
.hero-copy > *:nth-child(4) { animation-delay: .32s; }
.hero-copy > *:nth-child(5) { animation-delay: .4s; }
.hero-visual { animation: heroImageEnter .9s .16s cubic-bezier(.2,.7,.2,1) both; }

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
}