/**
 * ============================================================
 * Responsive Breakpoint'ler (responsive.css)
 * ============================================================
 * Mobile-first yaklaşım ile responsive kurallar
 */

/* ═══════════════ TABLET (max-width: 1024px) ═══════════════ */
@media (max-width: 1024px) {
    :root {
        --fs-hero: 3.5rem;
        --fs-3xl:  2rem;
        --fs-4xl:  2.5rem;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__stats {
        justify-content: center;
    }

    .hero__visual {
        display: none;
    }

    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ═══════════════ MOBİL LARGE (max-width: 768px) ═══════════════ */
@media (max-width: 768px) {
    :root {
        --fs-hero: 2.75rem;
        --fs-3xl:  1.75rem;
        --header-height: 70px;
        --container-padding: 1rem;
    }

    /* Mobil navigasyon */
    .header__hamburger {
        display: flex;
    }

    .header.menu-open {
        z-index: 501; /* Her şeyin üstünde olmalı */
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        padding: calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
        z-index: 500; 
        transition: right var(--transition-slow);
        overflow-y: auto;
        pointer-events: auto; /* Etkileşimi garanti et */
    }

    .nav.open {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .nav__link {
        display: block;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--fs-base);
        border-radius: var(--radius-md);
    }

    .nav__link:hover,
    .nav__link.active {
        background: var(--color-accent-subtle);
    }

    .nav__link::after {
        display: none;
    }

    .nav__link--cta {
        text-align: center;
        margin-top: var(--space-md);
    }

    /* Top bar */
    .top-bar__left {
        gap: var(--space-sm);
    }

    .top-bar__link span {
        display: none;
    }

    .top-bar__right {
        display: none;
    }

    .hero {
        padding: var(--space-3xl) 0;
        min-height: auto;
    }

    .hero__stats {
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

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

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

    .footer__bottom .container {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    /* Mobilde bağlantılar sarılır; ayraç satır başında kalmasın diye
       çizgi yerine boşluk kullanılır. */
    .footer__bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
    }

    .footer__bottom-links a + a::before {
        display: none;
    }
}

/* ═══════════════ MOBİL SMALL (max-width: 480px) ═══════════════ */
@media (max-width: 480px) {
    :root {
        --fs-hero: 2.25rem;
        --fs-3xl: 1.5rem;
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .btn--lg {
        padding: 0.875rem 1.75rem;
        font-size: var(--fs-sm);
    }
}

/* ═══════════════ footer__bottom — orta genişlik (769–1079px) ═══════════════
   Telif + beş yasal bağlantı Inter 12px'te 984px tutuyor (18.09.2026'da
   tarayıcıda ölçüldü). 1080px ve üzeri ekranda içerik alanı ≥1032px olduğu
   için tek satıra sığar; daha dar ekranda telif üstte, bağlantılar altta
   ortalanır — sıkışıp üst üste binmesinden iyidir. Bağlantı eklenirse ya da
   etiketler uzarsa bu eşik yeniden ölçülmelidir. */
@media (min-width: 769px) and (max-width: 1079px) {
    .footer__bottom .container {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }
}

/* Marka kelime işareti dar masaüstünde menüye yer bıraksın */
@media (min-width: 769px) and (max-width: 1180px) {
    .header__logo-img { height: 38px; }
    .nav__link { padding: var(--space-xs) 0.6rem; }
    .nav__link--cta { white-space: nowrap; }
}