/* SolarMax - ReactIn Style CSS */

/* Smooth scroll behavior for anchor links */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Scroll margin for anchor links to account for fixed header */
section[id] {
  scroll-margin-top: 90px; /* Reduced desktop header height */
}

@media (max-width: 768px) {
  section[id] {
    scroll-margin-top: 80px; /* Reduced mobile header height */
  }
}

/* Font Family */
body {
  font-family: 'Poppins', sans-serif;
  padding-top: 104px; /* Top bar + Navigation height for desktop */
  overflow-x: hidden; /* Prevent horizontal scroll globally */
  max-width: 100vw; /* Strict viewport width limit */
  /* Mobile touch and performance optimizations */
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global container overflow prevention */

*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
}

/* Sabit Navigation */
.nav-fixed {
  position: fixed !important;
  top: 40px; /* Top bar height approximation */
  left: 0;
  right: 0;
  z-index: 9999 !important; /* En yüksek z-index */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.3s ease;
}

.nav-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Top Bar Styles */
.top-bar {
  background: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #f59e0b 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1003;
  width: 100%;
}

/* Glass Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient Buttons */
.btn-gradient-primary {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #2563eb 100%);
  background-size: 200% 200%;
  transition: all 0.3s ease;
}

.btn-gradient-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
}

/* Card Hover Effects */
.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
}

/* WhatsApp Pulse */
.whatsapp-pulse {
  animation: pulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}

.whatsapp-pulse:hover {
  animation: none;
}

/* Animations */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
  }

  to {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
  }
}

/* Navigation Menu Enhancements */
.nav-menu-item {
  position: relative;
  transition: all 0.3s ease;
}

.nav-menu-item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-menu-item:hover::after {
  width: 100%;
}

.nav-menu-item:hover {
  transform: translateY(-1px);
}

/* Desktop CTA Button Enhancement */
.desktop-cta {
  position: relative;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #3b82f6);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.desktop-cta:hover {
  animation-duration: 1s;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 70px !important; /* Sadece navbar yüksekliği */
  }

  /* Navigation positioning */
  .nav-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    margin-top: 0 !important;
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  }

  /* Mobile menu z-index fix */
  .nav-fixed [x-show='mobileOpen'] {
    z-index: 1005 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
  } /* Mobile image optimization - progressive sizing */
  .carousel-image {
    min-height: 170px !important; /* Further reduced for better rectangular aspect */
    height: 170px !important;
  }

  /* Better mobile touch targets */
  .mobile-touch-target {
    min-height: 44px;
    min-width: 44px;
  }

  /* Improved mobile text readability */
  .mobile-text-optimize {
    line-height: 1.6;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Enhanced carousel image responsive breakpoints */
@media (max-width: 480px) {
  .carousel-image {
    min-height: 190px !important; /* Further optimized for small screens */
    height: 190px !important;
  }
}

@media (min-width: 481px) and (max-width: 640px) {
  .carousel-image {
    min-height: 210px !important; /* Better balanced for tablets */
    height: 210px !important;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .carousel-image {
    min-height: 190px !important; /* Consistent with mobile for rectangular look */
    height: 190px !important;
  }
}

/* Mobile menu override */
.mobile-menu-dropdown {
  z-index: 1003 !important;
}

/* Enhanced mobile scrolling */
@media (max-width: 768px) {
  html {
    scroll-padding-top: 88px; /* Mobile header height */
  }
}

/* Scroll to top offset for fixed header */
html {
  scroll-padding-top: 104px; /* Desktop header height */
}

/* Enhanced smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Mobile performance optimization */
@media (max-width: 768px) {
  .transform-gpu {
    transform: translateZ(0);
    will-change: transform;
  }
}

/* Hero Section Enhanced Styles */
.hero-enhanced {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 35%, #faf5ff 100%);
  min-height: 80vh;
  position: relative;
}

.hero-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

/* Hero Image Styles */
.hero-image {
  filter: brightness(1.1) contrast(1.05) saturate(1.1);
  transition: all 0.5s ease;
  backdrop-filter: blur(0px);
  aspect-ratio: 8/1; /* Very wide aspect ratio */
  object-position: center center;
  max-width: 100%;
  width: 100%;
  will-change: filter, box-shadow;
  /* Prevent any transforms that could cause overflow */
  transform: none !important;
}

.hero-image:hover {
  filter: brightness(1.15) contrast(1.1) saturate(1.15);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
  /* No transforms to prevent overflow issues */
  transform: none !important;
}

/* Hero image container to prevent overflow */
.hero-image-container {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  /* Strict overflow prevention */
  contain: layout style;
}

/* Hero image with subtle 3D effect */
@media (min-width: 768px) {
  .hero-image {
    /* Remove any 3D transforms that could cause overflow */
    transform: none !important;
    max-width: 100%;
    width: 100%;
  }

  .hero-image:hover {
    /* Keep only safe effects, no transforms */
    transform: none !important;
  }
}

/* Mobile optimization for hero image */
@media (max-width: 640px) {
  .hero-image {
    width: min(520px, calc(100vw - 1rem)) !important; /* Increased from 420px */
    height: 223px !important; /* Increased proportionally from 186px (h-48→h-56 equivalent) */
    border-radius: 1rem !important;
    aspect-ratio: 14/4; /* Maintained aspect ratio for wider image */
  }
}

@media (max-width: 480px) {
  .hero-image {
    width: min(460px, calc(100vw - 1rem)) !important; /* Increased from 380px */
    height: 197px !important; /* Increased proportionally from 164px (h-56→h-64 equivalent) */
  }
}

/* Hero benefits card styles */
.hero-benefits-card {
  backdrop-filter: blur(15px);
  transition: all 0.3s ease;
  border: 1px solid rgba(59, 130, 246, 0.12);
}

.hero-benefits-card:hover {
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
}

.hero-stat-item {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.4s ease;
}

.hero-stat-item:hover::before {
  left: 100%;
}

.hero-stat-item:hover {
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.hero-stat-item:active {
  transform: scale(0.98);
}

/* Modern hero benefits styling */
.hero-benefits-modern {
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Modern stats cards */
.modern-stat-card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.modern-stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modern-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.modern-stat-card:hover::before {
  left: 100%;
}

/* Mobile responsive adjustments for modern design */
@media (max-width: 640px) {
  .modern-stat-card {
    padding: 1rem;
  }

  .modern-stat-card .text-4xl {
    font-size: 2rem;
  }

  .modern-stat-card .text-sm {
    font-size: 0.75rem;
  }

  .modern-stat-card .w-12.h-12 {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Enhanced gradient backgrounds */
.gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Icon animations */
.feature-icon {
  transition: all 0.3s ease;
}

.feature-icon:hover {
  transform: rotate(10deg) scale(1.1);
}

/* Mobile optimization for hero stats */
@media (max-width: 640px) {
  .hero-stat-item {
    padding: 0.375rem;
    min-height: 45px;
  }

  .hero-stat-item div:first-child {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  .hero-stat-item div:last-child {
    font-size: 0.625rem;
    line-height: 1.1;
  }

  .hero-benefits-card {
    padding: 1rem;
  }
}

/* Value proposition cards */
.value-card {
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* New Value Propositions Mobile Design */
.value-pill {
  transition: all 0.3s ease;
  transform: translateZ(0);
  will-change: transform;
}

.value-pill:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.value-pill:active {
  transform: translateY(0) scale(0.95);
}

/* Main description card enhancements */
.description-card {
  backdrop-filter: blur(20px);
  transition: all 0.3s ease;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.description-card:hover {
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.08);
  transform: translateY(-2px);
}

/* Quick stats animation */
.quick-stat {
  transition: all 0.3s ease;
}

.quick-stat:hover {
  transform: scale(1.1);
}

/* Badge style stats */
.badge-stat {
  transition: all 0.3s ease;
  transform: translateZ(0);
  will-change: transform;
  min-height: 44px;
  touch-action: manipulation;
}

.badge-stat:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.badge-stat:active {
  transform: translateY(0) scale(0.95);
}

/* Mobile optimizations for badge stats */
@media (max-width: 640px) {
  .badge-stat {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    min-width: auto;
  }

  .badge-stat span:first-child {
    font-size: 1rem;
  }
}

/* Quick stats with SVG icons enhancement */
.quick-stat svg {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.quick-stat:hover svg {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.quick-stat .flex {
  transition: all 0.3s ease;
}

.quick-stat:hover .flex {
  transform: translateY(-2px);
}

/* Responsive text sizing */
@media (max-width: 640px) {
  .hero-title {
    font-size: clamp(1.5rem, 8vw, 3rem);
    line-height: 1.1;
  }

  .hero-subtitle {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
  }
}

/* Mobile specific optimizations */
@media (max-width: 640px) {
  .value-pill {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .description-card {
    margin: 0 0.5rem;
  }

  .quick-stat {
    min-width: 70px;
  }
}

/* Enhance touch targets for mobile */
@media (max-width: 768px) {
  .value-pill {
    min-height: 44px;
    touch-action: manipulation;
  }

  .description-card {
    padding: 1rem;
  }
}

/* CTA Button Enhancements */
.cta-shimmer {
  position: relative;
  overflow: hidden;
}

.cta-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.cta-shimmer:hover::after {
  animation: shimmer 1.5s ease-in-out;
  opacity: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Trust indicators animation */
.trust-indicator {
  transition: all 0.3s ease;
}

.trust-indicator:hover {
  transform: scale(1.05);
  color: rgb(99, 102, 241);
}

/* Enhanced button animations */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-enhanced:hover {
  transform: translateY(-3px) scale(1.02);
}

.btn-enhanced:active {
  transform: translateY(-1px) scale(0.98);
  transition: all 0.1s ease;
}

/* Mobile Navigation Optimizations */
@media (max-width: 768px) {
  .nav-menu-item::after {
    display: none; /* Hide underline effect on mobile */
  }

  /* Mobile menu special styling */
  .mobile-calculator-cta {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ef4444);
    background-size: 200% 200%;
    animation: mobileGradientShift 4s ease infinite;
  }

  @keyframes mobileGradientShift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
}

/* Global Mobile Performance Optimizations */
* {
  /* Hardware acceleration for smooth animations */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Touch action optimizations */
button,
a,
[role='button'] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent zoom on inputs for iOS */
input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Improved focus states for accessibility */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Smooth momentum scrolling */
.overflow-scroll,
.overflow-y-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .hero-image {
    filter: contrast(1.2) saturate(1.3);
  }

  .value-pill {
    border: 2px solid currentColor;
  }
}

/* Custom height utility for desktop hero image */
.xl\:h-112 {
  height: 28rem; /* 448px - equivalent to h-112 */
}

/* Toast notification auto-close animation */
@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Enhanced toast notification styles */
.toast-notification {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Ensure modal is perfectly centered */
  position: fixed !important;
  top: 50vh !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
}

/* Mobile toast positioning enhancements */
@media (max-width: 640px) {
  .toast-notification {
    max-width: calc(100vw - 2rem);
    margin: 0 1rem;
    /* Override for mobile to ensure proper centering */
    top: 50vh !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Prevent modal from appearing too high on very tall screens */
@media (min-height: 900px) {
  .toast-notification {
    top: 45vh !important;
  }
}

/* Mobile Navigation Specific Fixes */
@media (max-width: 768px) {
  /* Ensure mobile navigation is above everything */
  .nav-fixed {
    z-index: 9999 !important;
    position: fixed !important;
  }

  /* Mobile menu dropdown with highest priority */
  .nav-fixed > div > div[x-show='mobileOpen'] {
    z-index: 10000 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
  }

  /* Alternative mobile menu selector */
  [x-show='mobileOpen'] {
    z-index: 10000 !important;
  }

  /* Top bar should be below mobile menu */
  .top-bar {
    z-index: 9998 !important;
  }
}

/* Mobil navbar düzeltmesi - son çare */
@media (max-width: 768px) {
  /* Top bar'ı mobilde tamamen gizle */
  .top-bar {
    display: none !important;
  }

  .nav-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
  }

  /* Body padding ayarı - sadece navbar yüksekliği */
  body {
    padding-top: 60px !important; /* Sadece navbar yüksekliği */
    margin-top: 0 !important;
  }
}

/* Mobile Menu Background Fix - Son çare kuralları */
@media (max-width: 767px) {
  /* Mobil menü için kesin background */
  [x-show='mobileOpen'] {
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    z-index: 1005 !important;
  }

  /* Alternative selectors for mobile menu */
  .md\\:hidden[x-show='mobileOpen'],
  nav [x-show='mobileOpen'],
  div[x-show='mobileOpen'] {
    background-color: #ffffff !important;
    background-image: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }

  /* Mobil menü item'ları için arka plan */
  [x-show='mobileOpen'] > div {
    background-color: #ffffff !important;
  }

  /* Mobil menü link'leri */
  [x-show='mobileOpen'] a {
    background-color: transparent !important;
  }

  [x-show='mobileOpen'] a:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
  }
}

/* Top bar'ı mobilde tamamen gizle */
@media (max-width: 768px) {
  .top-bar {
    display: none !important;
  }

  /* Body padding'ini navbar yüksekliği kadar ayarla */
  body {
    padding-top: 70px !important; /* Sadece navbar için */
  }

  /* Navigation'ı en üste yerleştir */
  .nav-fixed {
    top: 0 !important;
    position: fixed !important;
    z-index: 9999 !important;
  }
}

/* Mobil menü açıkken body overlay */
@media (max-width: 767px) {
  body:has([x-show='mobileOpen'][style*='display']) {
    position: relative;
  }

  body:has([x-show='mobileOpen'][style*='display'])::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1004;
    pointer-events: none;
  }
}