/* Tablet */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }
    
    .listings-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .cities-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Ensure hamburger bars are clearly visible */
    .mobile-menu-toggle { color: #000 !important; z-index: 1001; }
    .mobile-menu-toggle span { background-color: currentColor !important; opacity: 1 !important; }
    /* Layout base */
    html, body { overflow-x: hidden; }
    .container { padding: 0 12px; }
    .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
    .col { padding: 0 8px; width: 100%; }

    /* Header/Nav */
    header, .site-header { position: sticky; top: 0; z-index: 1000; }
    .nav, .navbar { display: flex; flex-wrap: wrap; gap: 8px; }
    .navbar .menu, .nav .menu { display: flex; flex-direction: column; gap: 8px; }

    .hero {
        padding: 48px 0 24px; /* daha sıkı boşluk */
        margin-top: 24px; /* header altı minimal boşluk */
    }
    
    .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-bottom: 8px;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.4;
        margin-top: 4px;
    }
    
    .section {
        padding: 40px 0; /* mobilde daha kompakt */
    }

    /* Logo ve hero arasındaki boşluğu azaltmak için */
    .header + .main-content .hero,
    .header ~ .hero {
        margin-top: 24px; /* daha da azaltıldı */
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 2rem;
    }

    /* Forms */
    .form-row { flex-direction: column; gap: 12px; }
    .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
    .btn, .btn-primary, .btn-secondary { width: 100%; }

    /* Cards & grids */
    .listings-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .listing-card { display: flex; flex-direction: column; }
    .listing-card .image { width: 100%; height: auto; }
    .city-card { display: flex; flex-direction: row; align-items: center; }

    /* Tables */
    table { display: block; width: 100%; overflow-x: auto; border-spacing: 0; }
    thead { display: none; }
    tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid #eee; padding: 8px 0; }
    td { display: flex; justify-content: space-between; gap: 8px; }
    td::before { content: attr(data-label); font-weight: 600; color: #555; }

    /* Modals */
    .modal { width: 100%; max-width: 100%; margin: 0; border-radius: 0; }
    .modal-body { max-height: 70vh; overflow-y: auto; }
}

/* Small Mobile */
@media (max-width: 480px) {
    .listing-card,
    .city-card {
        margin: 0 auto;
        max-width: 100%;
    }
    
    .listing-features {
        flex-wrap: wrap;
    }
    
    .feature {
        flex: 1 0 45%;
    }

    /* Typography */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    .section-title { font-size: 1.6rem; }
    .hero-title { font-size: 1.6rem; }
}

/* Global helpers */
.hide-on-mobile { display: none !important; }
@media (min-width: 769px) { .hide-on-desktop { display: none !important; } }

/* Ensure images and media scale */
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }