/**
 * Katman 0–3 index (hub) sayfaları — mobilde dış yatay boşluk az,
 * metin okunabilir; iç sayfa .content-wrapper (640px) hizasına yakın.
 */

@media (max-width: 768px) {

    body.layer0-index-page .container,
    body.layer1-index-page .container,
    body.layer2-index-page .container,
    body.layer3-index-page .container {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
    }

    body.layer0-index-page .navbar .container,
    body.layer1-index-page .navbar .container,
    body.layer2-index-page .navbar .container,
    body.layer3-index-page .navbar .container {
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
    }

    body.layer0-index-page .hero-banner .container,
    body.layer1-index-page .hero-banner .container,
    body.layer2-index-page .hero-banner .container,
    body.layer3-index-page .hero-banner .container {
        padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
        gap: var(--spacing-sm);
    }

    body.layer0-index-page .layer-premium-stats-container,
    body.layer1-index-page .layer-premium-stats-container,
    body.layer2-index-page .layer-premium-stats-container,
    body.layer3-index-page .layer-premium-stats-container {
        padding-left: max(0.35rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.35rem, env(safe-area-inset-right, 0px));
    }

    body.layer1-index-page .l1mm-root {
        padding: 0.9rem 0.55rem;
        border-radius: 16px;
    }
}

@media (max-width: 640px) {

    body.layer0-index-page .hero-title,
    body.layer1-index-page .hero-title,
    body.layer2-index-page .hero-title,
    body.layer3-index-page .hero-title {
        line-height: 1.2;
    }

    body.layer0-index-page .hero-description,
    body.layer1-index-page .hero-description,
    body.layer2-index-page .hero-description,
    body.layer3-index-page .hero-description {
        line-height: 1.65;
        text-align: left;
        hyphens: none;
    }

    body.layer0-index-page .feature-card,
    body.layer1-index-page .feature-card,
    body.layer2-index-page .feature-card,
    body.layer3-index-page .feature-card {
        padding: var(--spacing-sm) 0.65rem;
    }

    body.layer0-index-page .learning-path-card-wrapper,
    body.layer1-index-page .learning-path-card-wrapper,
    body.layer2-index-page .learning-path-card-wrapper,
    body.layer3-index-page .learning-path-card-wrapper {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    body.layer1-index-page .l1mm-root {
        padding: 0.75rem 0.45rem;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }

    body.layer1-index-page .l1mm-card {
        padding: 0.85rem 0.65rem;
    }
}

@media (max-width: 480px) {

    body.layer0-index-page .container,
    body.layer1-index-page .container,
    body.layer2-index-page .container,
    body.layer3-index-page .container {
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
    }

    body.layer0-index-page .navbar .container,
    body.layer1-index-page .navbar .container,
    body.layer2-index-page .navbar .container,
    body.layer3-index-page .navbar .container {
        padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.4rem, env(safe-area-inset-right, 0px));
    }

    body.layer0-index-page .hero-banner .container,
    body.layer1-index-page .hero-banner .container,
    body.layer2-index-page .hero-banner .container,
    body.layer3-index-page .hero-banner .container {
        padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
    }

    body.layer1-index-page .l1mm-root {
        padding: 0.65rem 0.4rem;
        border-radius: 14px;
    }

    body.layer1-index-page .l1mm-card {
        padding: 0.75rem 0.55rem;
    }
}
