/* ==========================================================================
   SinnSoft — Responsive (Mobile-First)
   Breakpointler: sm 640 / md 768 / lg 1024 / xl 1280
   ========================================================================== */

/* ---- Varsayılan (mobil, <640px) ---- */
.grid-services { grid-template-columns: 1fr; gap: var(--space-3); }
.grid-projects { grid-template-columns: 1fr; }

.nav-menu { display: none; }
.mobile-menu-btn { display: inline-flex; }

.hero-grid { grid-template-columns: 1fr; }
.hero-content { text-align: center; }
.hero-actions { justify-content: center; }
.hero-media { order: -1; max-width: 220px; margin-inline: auto; margin-bottom: var(--space-2); }

.stats-overlap { margin-top: var(--space-5); }

.cta-left { flex-direction: column; text-align: center; }

/* ---- sm: 640px+ (büyük telefon) ---- */
@media (min-width: 640px) {
  .grid-services { grid-template-columns: repeat(2, 1fr); }
  .grid-projects { grid-template-columns: repeat(2, 1fr); }
}

/* ---- md: 768px+ (tablet) ---- */
@media (min-width: 768px) {
  :root { --container-padding: 2rem; }

  .hero-content { text-align: left; }
  .hero-actions { justify-content: flex-start; }

  .cta-left { flex-direction: row; text-align: left; }
}

/* ---- lg: 960px+ (küçük masaüstü) ---- */
@media (min-width: 960px) {
  .nav-menu { display: flex; }
  .mobile-menu-btn { display: none; }

  .grid-services { grid-template-columns: repeat(3, 1fr); }
  .grid-projects { grid-template-columns: repeat(3, 1fr); }

  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: var(--space-10);
  }
  .hero-media { order: 0; max-width: none; margin-bottom: 0; }

  .stats-overlap { margin-top: calc(var(--space-12) * -1); }
}

/* ---- xl: 1280px+ (büyük masaüstü) ---- */
@media (min-width: 1280px) {
  :root { --container-padding: 0; }

  .grid-services { grid-template-columns: repeat(5, 1fr); }
}