/* ============================================
   Çağ Otomotiv - Responsive CSS
   ============================================ */

/* --- 1200px --- */
@media (max-width: 1200px) {
    .hero h1 { font-size: 3.2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .detail-grid { grid-template-columns: 1fr 300px; }
}

/* --- 992px --- */
@media (max-width: 992px) {
    .main-nav { display: none; }
    .mobile-menu-btn { display: flex; }

    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero-content { max-width: 100%; }
    .hero-buttons { justify-content: center; }
    .hero { min-height: 70vh; }
    .hero h1 { font-size: 2.8rem; }
    .hero p { max-width: 100%; }

    .whatsapp-inner { grid-template-columns: 1fr; text-align: center; }
    .phone-mockup { margin-top: 36px; }

    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .counters-grid { grid-template-columns: repeat(2, 1fr); }
    .counter-item::after { display: none; }
    .filter-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }

    .detail-grid { grid-template-columns: 1fr; }
    .sidebar-lead-box { position: static; }
    .about-content { grid-template-columns: 1fr; }
    .contact-page-grid { grid-template-columns: 1fr; }

    .floating-orb { opacity: 0.2; }
}

/* --- 768px --- */
@media (max-width: 768px) {
    :root { --header-height: 62px; }

    .container { padding: 0 18px; }
    .section { padding: 70px 0; }

    .top-bar-left { gap: 12px; }
    .top-bar-left .tb-hours,
    .top-bar-left .tb-address { display: none; }

    .hero { min-height: 60vh; padding-top: 24px; }
    .hero h1 { font-size: 2.2rem; letter-spacing: -0.5px; }
    .hero p { font-size: 0.95rem; }
    .hero-visual { display: none; }

    .section-header h2 { font-size: 2rem; }

    .vehicles-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .vehicle-card-image { height: 170px; }

    .trust-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    .detail-main-image { height: 300px; }
    .detail-specs-grid { grid-template-columns: 1fr; }
    .detail-price { font-size: 1.8rem; }

    .phone-mockup { width: 270px; }
    .phone-screen { min-height: 440px; }

    .counter-number { font-size: 2.4rem; }

    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .listing-controls { flex-direction: column; align-items: stretch; }

    .floating-orb { display: none; }
}

/* --- 576px --- */
@media (max-width: 576px) {
    .top-bar { display: none; }

    .hero h1 { font-size: 1.9rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }

    .vehicles-grid { grid-template-columns: 1fr; }
    .vehicle-card-image { height: 210px; }

    .counters-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .counter-number { font-size: 2rem; }

    .filter-grid { grid-template-columns: 1fr; }

    .btn-lg { padding: 14px 28px; font-size: 0.9rem; }

    .whatsapp-fixed { width: 54px; height: 54px; font-size: 1.5rem; bottom: 18px; right: 18px; }

    .phone-mockup { width: 250px; }
    .phone-frame { border-radius: 34px; padding: 10px; }
    .phone-screen { min-height: 400px; border-radius: 24px; }
    .message { font-size: 0.75rem; }

    .section-header h2 { font-size: 1.6rem; }
    .floating-tags { justify-content: center; }

    .hero::before { display: none; }
}