/* ==========================================================================
   Responsive CSS — Breakpoints up to 1024px
   ========================================================================== */

/* ── 1024px Ekranlar (Laptop/Tablet Landscape) ── */
@media screen and (max-width: 1024px) {
    /* Header Fixes */
    .header-inner {
        padding: 0 var(--space-md);
    }
    .primary-nav {
        display: none; /* Desktop menu gizle */
    }
    .header-cta-btn {
        display: none; /* CTA gizle */
    }
    .hamburger-btn {
        display: flex; /* Hamburger göster */
    }

    /* Footer */
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }

    /* Sidebar/Social */
    .social-sidebar {
        display: none; /* Mobilde gizle */
    }

    /* Homepage Sections */
    .hero-section .container,
    .blog-section__inner {
        grid-template-columns: 1fr;
    }

    .hero-content {
        margin: 0 auto;
        text-align: center;
    }

    .hero-content__typing {
        min-height: auto;
    }

    .info-cards-grid,
    .news-grid__items,
    .feature-panels__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-floating-box {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
        padding: var(--space-xl);
    }

    .newsletter-section__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ── 768px Ekranlar (Tablet Portrait/Mobil Büyük) ── */
@media screen and (max-width: 768px) {
    :root {
        --h1-size: 32px;
        --h2-size: 26px;
        --h3-size: 20px;
        --space-5xl: 40px;
        --space-4xl: 32px;
        --space-3xl: 24px;
    }

    /* Global Container Padding for Mobile */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Fix sections that have custom padding - remove horizontal padding and let container handle it */
    .news-section, 
    .blog-section, 
    .newsletter-section,
    .info-cards-section,
    .events-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .info-cards-grid,
    .news-grid__items,
    .feature-panels__grid,
    .blog-cards {
        grid-template-columns: 1fr;
    }

    .info-card, .news-card, .blog-card {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
        min-height: auto !important;
        padding: var(--space-xl) !important;
    }

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

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .stats-floating-box {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }

    .feature-panel {
        height: 60vh !important;
    }

    .feature-panel__content {
        padding: var(--space-xl) !important;
    }

    .cta-section__inner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg) !important;
        gap: var(--space-md);
    }

    .cta-section__title {
        font-size: 24px;
    }
    
    .hero-image {
        margin-top: var(--space-xl);
        text-align: center;
    }

    .hero-image img {
        margin: 0 auto;
        max-width: 280px; /* Limit hero image size on small mobile */
        height: auto;
    }
    
    .single-post__meta {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

/* ── 480px Ekranlar (Mobil Küçük) ── */
@media screen and (max-width: 480px) {
    :root {
        --h1-size: 28px;
    }
    
    .site-logo img {
        max-width: 150px;
        height: auto;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }

    .search-overlay__form {
        flex-direction: column;
        gap: var(--space-md);
    }

    .search-overlay__submit {
        position: relative;
        right: auto;
        width: 100%;
        border-radius: var(--radius-pill);
    }

    /* Hero reduction */
    .hero-content__typing {
        font-size: 24px;
    }
}