/* =========================================================
   TATLICI MUSTAFA — responsive.css
   Mobil öncelikli düşünülmüş, 320 → 1600px tam kapsama.
   ========================================================= */

/* ---------- 1600px ve üzeri: geniş ekran ferahlığı ---------- */
@media (min-width: 1600px) {
    :root { --container: 1360px; }
    .hero__floating-card { right: 8%; }
}

/* ---------- 1280px altı ---------- */
@media (max-width: 1280px) {
    .services__grid { grid-template-columns: repeat(3, 1fr); }
    .advantages__grid { grid-template-columns: repeat(4, 1fr); }
    .pricing__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 1024px altı: navbar mobile menu devreye girer ---------- */
@media (max-width: 1024px) {
    .navbar__list { display: none; }
    .navbar__cta { display: none; }
    .navbar__burger { display: flex; }

    .navbar__nav {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height: 100vh;
        background: var(--paper); box-shadow: -20px 0 50px rgba(0,0,0,0.15);
        transform: translateX(100%); transition: transform 0.4s var(--ease);
        padding: calc(var(--nav-h) + 24px) 28px 28px; z-index: 999;
    }
    .navbar__nav.is-open { transform: translateX(0); }
    .navbar__list { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
    .navbar__link { color: var(--ink); font-size: 18px; padding: 10px 0; width: 100%; }

    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .advantages__grid { grid-template-columns: repeat(3, 1fr); }
    .blog__grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-card { flex: 0 0 calc(50% - 12px); }

    .hero { flex-direction: column; padding-bottom: 40px; }
    .hero__floating-card { position: static; margin: 40px auto 0; width: 100%; max-width: 360px; }
}

/* ---------- 768px altı: tablet / büyük telefon ---------- */
@media (max-width: 768px) {
    section { padding: 56px 0; }
    .container { padding-inline: 20px; }

    .services__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .advantages__grid { grid-template-columns: repeat(2, 1fr); }
    .pricing__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .pricing-card--featured { transform: none; order: -1; }
    .pricing-card--featured:hover { transform: translateY(-8px); }

    .contact__grid { grid-template-columns: 1fr; gap: 40px; }
    .about-story__grid { grid-template-columns: 1fr; gap: 32px; }
    .blog__grid { grid-template-columns: 1fr; }

    .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    .testimonial-card { flex: 0 0 100%; }
    .cta-banner__inner { flex-direction: column; text-align: center; }
    .cta-banner__actions { justify-content: center; }

    .mobile-bar { display: flex; }
    .sticky-actions { right: 16px; bottom: 84px; }
    .sticky-actions__btn { width: 46px; height: 46px; }
    .sticky-actions__btn svg { width: 20px; height: 20px; }
}

/* ---------- 430px altı ---------- */
@media (max-width: 430px) {
    .hero__cta { flex-direction: column; align-items: stretch; }
    .hero__cta .btn { width: 100%; }
    .hero__floating-card { padding: 22px; }
    .steps__item { width: 130px; }
    .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- 390px altı ---------- */
@media (max-width: 390px) {
    .section-title { font-size: 26px; }
    .services__grid, .advantages__grid { grid-template-columns: 1fr; }
    .steps__timeline { flex-direction: column; }
    .steps__arrow svg { transform: rotate(0deg); }
}

/* ---------- 375px ve 320px: dar ekranlarda son ince ayar ---------- */
@media (max-width: 375px) {
    .navbar__logo-text { display: none; }
    .contact__cta-row { flex-direction: column; }
    .contact__cta-row .btn { width: 100%; }
}

@media (max-width: 320px) {
    .hero__badge { font-size: 12px; padding: 6px 14px; }
    .pricing-card { padding: 32px 20px; }
}