/* Responsive Layout Adjustments - Mobil Sporcu Plus */

/* ==========================================================================
   Desktop / Large Screens (1440px +)
   ========================================================================== */
@media (min-width: 1440px) {
    :root {
        --container-max-width: 1360px;
    }
}

/* ==========================================================================
   Medium Desktop / Notebook (1280px)
   ========================================================================== */
@media (max-width: 1280px) {
    :root {
        --font-size-5xl: 3rem;
        --font-size-4xl: 2.25rem;
    }
}

/* ==========================================================================
   Tablet Landscape / Small Notebook (1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --spacing-xxl: 3rem;
        --spacing-xxxl: 4.5rem;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
    }

    /* Grids */
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Header Nav and Actions */
    .site-nav {
        display: none;
    }

    .site-header__actions {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
    }

    /* Hero section grid */
    .hero__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .hero__content {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__trust {
        justify-content: center;
    }

    .hero__visual {
        margin-top: var(--spacing-md);
    }

    /* Modules detailed view */
    .module-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xxl);
    }

    .module-row--reverse .module-row__content {
        order: initial;
    }

    .module-row__visual {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Footer Grid */
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

/* ==========================================================================
   Tablet Portrait (768px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }

    .section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    /* Grids */
    .grid--4, .grid--3, .grid--2 {
        grid-template-columns: 1fr;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    /* Left column features layout swap on mobile (icon left, text right) */
    .features-grid > div:first-child .js-feature-tab {
        text-align: left !important;
    }
    
    .features-grid > div:first-child .js-feature-tab > div {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
        gap: var(--spacing-md) !important;
    }
    
    /* Right column features alignment reset */
    .features-grid > div:last-child .js-feature-tab {
        text-align: left !important;
    }
    
    .features-grid > div:last-child .js-feature-tab > div {
        justify-content: flex-start !important;
        gap: var(--spacing-md) !important;
    }

    /* Prevent horizontal overflow from floating badges on mobile */
    .floating-bubble {
        max-width: 90vw;
    }

    .hero__visual, .tablet-mockup {
        max-width: 100%;
        overflow: visible;
    }

    /* Timeline */
    .timeline::after {
        left: 20px;
    }

    .timeline__item {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
        left: 0 !important;
        margin-bottom: var(--spacing-md);
    }

    .timeline__item::after {
        left: 12px;
        right: auto;
    }

    /* Reports Widgets */
    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer bottom column flow */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .site-header__actions {
        display: none; /* Hide desktop header actions in header bar on mobile */
    }

    /* Mobile panel inside navigation.js will embed login and demo links instead */
}

/* ==========================================================================
   Mobile Landscape / Portrait (480px)
   ========================================================================== */
@media (max-width: 480px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.5rem;
        --font-size-3xl: 1.35rem;
        --spacing-xl: 1.5rem;
        --spacing-xxl: 2.5rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .tab-btn-wrapper {
        flex-direction: column !important;
        width: 100%;
        gap: var(--spacing-xs) !important;
    }
    
    .tab-btn {
        width: 100%;
        text-align: center;
    }

    .hero__title {
        font-size: var(--font-size-4xl);
    }

    /* Forms */
    .btn {
        width: 100%; /* Make buttons block level on tiny mobile screen */
    }

    .cookie-banner {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        bottom: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .cookie-banner__actions {
        flex-direction: column;
    }

    .cookie-banner__actions .btn {
        width: 100%;
    }

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

/* ==========================================================================
   Small Mobile Devices (360px)
   ========================================================================== */
@media (max-width: 360px) {
    :root {
        --spacing-lg: 0.75rem;
    }
    
    .hero__tagline {
        font-size: 10px;
    }
}

/* ==========================================================================
   Erişilebilir Mobil Menü Arayüzü (JS Sınıfları)
   ========================================================================== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 21, 51, 0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    z-index: calc(var(--z-index-header) - 1);
}

.mobile-menu-overlay--open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    height: 100%;
    background-color: var(--color-background);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    z-index: var(--z-index-overlay);
}

.mobile-menu-panel--open {
    transform: translateX(0);
}

.mobile-menu-panel__close {
    align-self: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.mobile-menu-panel__close-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--color-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-menu-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.mobile-menu-panel__link {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    display: block;
}

.mobile-menu-panel__link:hover {
    color: var(--color-primary);
}

.mobile-menu-panel__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
}