/**
 * Mobil / kichik ekran — asosan 840px dan past.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 840px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    header,
    header.active {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .site-header .header-inner {
        min-height: 68px;
        padding: 12px 14px;
    }

    header.site-header.active .header-inner {
        padding: 12px 14px;
    }

    .site-header .user-info {
        gap: 10px;
    }

    .site-header .logo {
        width: 46px;
        height: 46px;
    }

    .site-header .logo img {
        width: 34px !important;
        height: auto;
    }

    .header-copy .eyebrow {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .header-copy h1 {
        font-size: 0.9rem;
    }

    .top-row {
        flex-wrap: nowrap;
        row-gap: 0;
        justify-content: flex-end;
    }

    .top-row .price-box {
        order: 0;
        width: auto;
        max-width: none;
        justify-content: space-between;
    }

    .price {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .swiper.mySwiper {
        height: min(52vw, 240px) !important;
    }

    .swiper.mySwiper .swiper-slide {
        height: 100%;
        aspect-ratio: auto;
    }

    .swiper.mySwiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-pagination-bullet {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 10px !important;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        padding-left: 0;
        padding-right: 0;
    }

    .card p {
        font-size: 9px;
    }

    .hero {
        height: min(42vw, 220px);
    }

    .hero-title {
        font-size: 22px;
        left: 14px;
        bottom: 14px;
    }

    .content {
        padding-left: 0;
        padding-right: 0;
    }

    .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .package-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 8px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .package-img {
        width: 40px;
        height: 40px;
        font-size: 10px;
    }

    .package-name {
        font-size: 11px;
        white-space: normal;
        line-height: 1.25;
    }

    .package-price {
        font-size: 10px;
    }

    .filter-tabs {
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .tab {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    nav.app-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    nav.app-bottom-nav .nav-inner {
        max-width: 100% !important;
        width: 100%;
        min-width: 0;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: space-between;
        padding: 6px 4px;
        gap: 2px;
        box-sizing: border-box;
    }

    nav.app-bottom-nav .nav-item {
        touch-action: manipulation;
        padding: 4px 1px;
        min-height: 50px;
    }

    nav.app-bottom-nav .nav-item__label {
        font-size: 0.62rem !important;
        letter-spacing: 0;
    }

    nav.app-bottom-nav .nav-item__icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    nav.app-bottom-nav .nav-item i {
        font-size: 0.85rem;
    }

    nav.app-bottom-nav .nav-item svg {
        width: 20px;
        height: 20px;
    }

    .drawer {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
        max-height: min(92vh, 100dvh);
    }

    .drawer-input {
        font-size: 16px;
    }

    .submit-btn {
        touch-action: manipulation;
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    .chat-btn {
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
    }

    .site-flash {
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        transform: none;
        max-width: none;
        text-align: center;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .packages-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

@media (max-width: 480px) {
    .auth-shell {
        padding: 16px max(12px, env(safe-area-inset-left, 0px)) calc(132px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
    }

    .auth-card {
        padding: 22px 16px;
        border-radius: 14px;
    }
}