/**
 * Responsive Styles
 * Propan Soğutma Sistemleri
 * Media queries for mobile, tablet, and desktop
 */

/* ========================================
   MOBILE FIRST APPROACH
   Base styles are for mobile (< 768px)
   ======================================== */

/* ========================================
   TABLET (768px and up)
   ======================================== */

@media (min-width: 768px) {

  /* Header */
  .nav-desktop {
    display: flex;
  }

  .header-cta {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  /* Hero */
  .hero-cta {
    flex-wrap: nowrap;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Solutions */
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process Timeline */
  .process-step {
    grid-template-columns: 100px 1fr;
  }

  .step-number {
    width: 100px;
    height: 100px;
    font-size: var(--fs-800);
  }

  /* Contact Form */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  .cta-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  .mobile-sticky-cta {
    display: none !important;
  }

  .whatsapp-float {
    bottom: var(--space-8);
  }

}

/* ========================================
   DESKTOP (1024px and up)
   ======================================== */

@media (min-width: 1024px) {

  /* Container */
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Solutions Grid */
  .solutions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Features Grid */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hero */
  .hero {
    min-height: 80vh;
  }

  .hero-title {
    font-size: var(--fs-900);
  }

}

/* ========================================
   LARGE DESKTOP (1440px and up)
   ======================================== */

@media (min-width: 1440px) {

  /* Container */
  .container {
    max-width: var(--container-max-width);
  }

}

/* ========================================
   MOBILE ONLY (< 768px)
   ======================================== */

@media (max-width: 767px) {

  /* Typography */
  h1, .h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  h2, .h2 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  /* Hero */
  .hero {
    min-height: 60vh;
  }

  .hero-content {
    padding: var(--space-12) 0;
  }

  .hero-cta {
    flex-direction: column;
  }

  .hero-cta .btn {
    width: 100%;
  }

  .hero-trust {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .stat-item {
    gap: var(--space-2);
  }

  .stat-icon svg {
    width: 32px;
    height: 32px;
  }

  .stat-number {
    font-size: var(--fs-700);
  }

  /* Solutions */
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    padding: var(--space-6);
  }

  /* Process Timeline */
  .process-step {
    grid-template-columns: 60px 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .process-step:not(:last-child)::before {
    left: 30px;
    top: 60px;
  }

  .step-number {
    width: 60px;
    height: 60px;
    font-size: var(--fs-600);
  }

  .step-icon {
    width: 48px;
    height: 48px;
  }

  .step-icon svg {
    width: 32px;
    height: 32px;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Testimonials */
  .testimonial-card {
    padding: var(--space-6);
  }

  .testimonial-quote {
    font-size: var(--fs-400);
  }

  .testimonial-results {
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Contact Form */
  .cta-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .quick-contact-form {
    padding: var(--space-6);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-newsletter {
    padding: var(--space-6);
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-bottom-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Mobile Sticky CTA */
  .mobile-sticky-cta {
    display: flex !important;
  }

  .whatsapp-float {
    bottom: 76px;
    right: var(--space-4);
    width: 56px;
    height: 56px;
  }

  .back-to-top {
    bottom: 76px;
    left: var(--space-4);
    width: 44px;
    height: 44px;
  }

}

/* ========================================
   TABLET ONLY (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Solutions */
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

}

/* ========================================
   SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 479px) {

  /* Container */
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Sections */
  .section-padding {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  /* Hero */
  .hero-badge {
    font-size: var(--fs-200);
    padding: var(--space-2) var(--space-3);
  }

  .hero-subtitle {
    font-size: var(--fs-400);
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  .btn {
    font-size: var(--fs-300);
    padding: var(--space-3) var(--space-4);
  }

  .btn-large {
    font-size: var(--fs-400);
    padding: var(--space-3) var(--space-6);
  }

  /* Form */
  .form-trust-signals {
    flex-direction: column;
    gap: var(--space-2);
  }

}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

  /* Hide navigation and interactive elements */
  .header,
  .nav-mobile,
  .mobile-sticky-cta,
  .whatsapp-float,
  .back-to-top,
  .scroll-indicator,
  .hero-cta,
  .newsletter-form {
    display: none !important;
  }

  /* Adjust colors for print */
  body {
    color: #000;
    background: #fff;
  }

  .hero,
  .stats-band,
  .bg-gradient,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }

  /* Remove shadows and borders */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Page breaks */
  h2, h3 {
    page-break-after: avoid;
  }

  .solution-card,
  .feature-card,
  .process-step {
    page-break-inside: avoid;
  }

  /* Links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
  }

}

/* ========================================
   LANDSCAPE MOBILE (small screens in landscape)
   ======================================== */

@media (max-height: 600px) and (orientation: landscape) {

  .hero {
    min-height: 100vh;
    padding-top: var(--space-20);
  }

  .hero-scroll {
    display: none;
  }

}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  /* Optimize images for retina */
  .logo img,
  .footer-logo img {
    image-rendering: -webkit-optimize-contrast;
  }

}

/* ========================================
   DARK MODE (optional - for future)
   ======================================== */

@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here if needed */
}

/* ========================================
   REDUCED MOTION (accessibility)
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-indicator {
    animation: none;
  }

  .logo-track {
    animation: none;
  }

}