/* ==========================================
   ANKA GÜVENLİK SİSTEMLERİ - RESPONSIVE STYLES
   ========================================== */

/* --- 1. Small Devices & Up (Mobile Landscape - 576px) --- */
@media (min-width: 576px) {
  /* Global Grid System */
  .grid-2 { 
    grid-template-columns: repeat(2, 1fr); 
  }

  .hero-service-link {
    width: 78px;
  }

  /* Solutions Slider Cards */
  .solution-slide-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* --- 2. Medium Devices & Up (Tablets - 768px) --- */
@media (min-width: 768px) {
  /* Navigation Menu */
  .nav-menu {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .header-phone {
    display: flex;
  }

  /* Process Stepper Timeline */
  .process-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-step {
    text-align: center;
  }

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

  /* Blog Grid - 2 Columns */
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 3. Large Devices & Up (Desktop / Laptops - 992px) --- */
@media (min-width: 992px) {
  /* Global Grid System */
  .grid-3 { 
    grid-template-columns: repeat(3, 1fr); 
  }
  
  .grid-4 { 
    grid-template-columns: repeat(4, 1fr); 
  }

  /* Hero Layout Grid */
  .hero-container {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .hero-widget {
    display: flex;
  }

  .hero-service-links {
    gap: var(--space-5) var(--space-6);
    max-width: 560px;
  }

  /* Services Component Layout */
  .services-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
  }

  .services-grid-wrapper .service-card {
    grid-column: span 2;
  }

  /* Solutions Slide Sizing */
  .solution-slide-card {
    flex: 0 0 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
  }

  /* Process Stepper Component Layout */
  .process-timeline {
    grid-template-columns: repeat(6, 1fr);
  }

  .process-line {
    display: block;
  }

  /* About Section Layout */
  .about-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }

  .about-visual {
    display: block;
  }

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

  /* Blog Grid Layout */
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contact CTA Split Layout */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-image-wrapper {
    display: block;
  }

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

  .footer-bottom {
    flex-direction: row;
  }
}