/* RESPONSIVE STYLES */

@media (max-width: 1024px) {
    .container { padding: 0 24px; }
    .section { padding: 80px 0; }
    .hero-images { width: 45%; opacity: 0.4; }
    .about-grid { gap: 50px; }
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    :root { --header-h: 70px; }
    .section { padding: 60px 0; }

    /* Mobile menu — ochilganda butun ekranni qoplaydi (header ostida) */
    .menu-toggle { display: flex; }
    .nav {
        position: fixed !important;
        top: var(--header-h); left: 0; right: 0; bottom: 0;
        width: 100%;
        height: calc(100vh - var(--header-h));
        min-height: calc(100vh - var(--header-h));
        background: var(--color-bg);
        padding: 30px;
        overflow-y: auto;
        z-index: 500;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s 0.35s;
        display: block;
    }
    .nav.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.35s ease, opacity 0.3s ease, visibility 0s 0s;
    }
    .nav-list {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }

    /* Menyu ochiq paytda body scroll bloklanadi */
    body.menu-open { overflow: hidden; }
    .nav-link { font-size: 1.1rem; }

    .header-actions .btn { display: none; }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 40px 0 80px;
    }
    .hero-images { display: none; }
    .hero-title { font-size: 2.5rem; }
    .hero-description { font-size: 1rem; }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-image { max-width: 500px; margin: 0 auto; }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .contact-info-card,
    .contact-form { padding: 30px; }
    .form-row { grid-template-columns: 1fr; gap: 0; }

    /* Footer */
    .footer { padding: 60px 0 20px; }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Section header */
    .section-header { margin-bottom: 40px; }
    .section-title { font-size: 2rem; }

    /* Projects */
    .projects-filter { gap: 8px; }
    .filter-btn { padding: 8px 16px; font-size: 0.85rem; }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px; right: 20px;
        width: 42px; height: 42px;
    }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero-title { font-size: 2rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .btn { padding: 12px 24px; }
    .service-card,
    .review-card { padding: 30px 24px; }
    .news-content { padding: 24px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .stat-item h3 { font-size: 2.5rem; }
}

/* =========================================================
   QO'SHIMCHA MOBIL TUZATISHLAR
   ========================================================= */

/* Mobilda bo'sh hero canvas yashiriladi (Three.js o'chirilgan) */
@media (max-width: 1023px) {
    .hero-canvas { display: none; }
}

/* iOS klaviatura zoom oldini olish — input font kamida 16px */
@media (max-width: 768px) {
    .form-input,
    .form-textarea,
    .form-select,
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea { font-size: 16px; }

    /* Tugmalar — touch uchun yetarli balandlik */
    .btn { min-height: 44px; }
    .theme-toggle { width: 42px; height: 42px; }
    /* Menu-toggle vizual o'lcham saqlanadi, tap maydoni padding bilan kengaytiriladi */
    .menu-toggle {
        padding: 15px 8px;
        box-sizing: content-box;
    }
}

/* Til almashtirgich — bosish (tap) bilan ochiladi (touch qurilmalar uchun) */
.lang-switcher.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher.open .lang-current .fa-chevron-down {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    /* Header — mobilda zichroq */
    .header-inner { gap: 10px; }
    .header-actions { gap: 8px; order: 99; }   /* Uchta chiziq (menyu) — eng o'ngga */
    .lang-current { padding: 7px 10px; font-size: 13px; }
    .lang-dropdown { right: -8px; min-width: 160px; }

    /* Hero — yumshoqroq, tugmalar ustun-ustun */
    .hero-title em { display: none; } /* Bo'sh nuqta mobilda kerakmas */
    .hero-actions { flex-direction: column; gap: 12px; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    /* Kontakt xarita — mobilda kamroq joy egallaydi */
    .map-container { height: 360px; }

    /* Kontakt info kartasi — joylar zichroq */
    .contact-info-card { padding: 28px 22px; }
    .contact-info-card li { font-size: 0.95rem; }

    /* About kollaj — kichikroq burchaklar, markazga */
    .about-collage { max-width: 500px; margin: 0 auto; }
    .collage-img-1 { transform: rotate(-4deg); }
    .collage-img-2 { transform: rotate(1deg); }
    .collage-img-3 { transform: rotate(-2deg); }
    .about-collage:hover .collage-img-1 { transform: rotate(-2deg) translateY(-4px); }
    .about-collage:hover .collage-img-2 { transform: rotate(0deg)  translateY(-4px); }
    .about-collage:hover .collage-img-3 { transform: rotate(-1deg) translateY(-4px); }

    /* Sahifa sarlavhasi (loyihalar, xizmatlar va h.k.) */
    .page-header { padding: 40px 0 30px; }

    /* Loyiha kartasi rasm nisbati — mobilga moslab */
    .project-card .project-image { aspect-ratio: 4/3; }

    /* Hero — ko'proq tepa joy (header-spacer kichikroq) */
    .header-spacer { height: 70px; }
}

@media (max-width: 600px) {
    /* Til almashtirgichdan strelka olib tashlanadi (joy tejash) */
    .lang-current { padding: 7px 9px; gap: 5px; }
    .lang-current .fa-chevron-down { display: none; }
}

@media (max-width: 480px) {
    .section { padding: 50px 0; }

    /* Hero typography */
    .hero { padding: 30px 0 60px; }
    .hero-title { font-size: 1.85rem; line-height: 1.15; }
    .hero-tag { font-size: 0.8rem; }
    .hero-description { font-size: 0.95rem; }

    /* Bo'lim sarlavhalari */
    .section-title { font-size: 1.75rem; line-height: 1.2; }
    .section-tag { font-size: 0.8rem; }
    .section-description { font-size: 0.95rem; }

    /* About kollaj — kichik ekranlarda kompaktroq */
    .collage-img-1 { width: 52%; height: 32%; }
    .collage-img-2 { width: 78%; height: 50%; left: 10%; }
    .collage-img-3 { width: 60%; height: 38%; }

    /* Stats — bitta ustunga */
    .stats-grid { grid-template-columns: 1fr; gap: 18px; }
    .stat-item h3 { font-size: 2.25rem; }
    .stat-item p { font-size: 0.95rem; }

    /* Karta paddinglarini kichraytirish */
    .service-card { padding: 26px 22px; }
    .news-content { padding: 22px; }

    /* Footer — kichikroq sarlavhalar */
    .footer-title { font-size: 1rem; }
    .footer-logo { font-size: 1.3rem; }

    /* Header logo o'lchami — joy kamayganda */
    .logo-text { font-size: 1.05rem; }
    .header-inner { gap: 6px; }

    /* Tahrirlash formalari va admin sahifalari uchun umumiy */
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
}

/* ==================================================
   YANGI SEKTSIYALAR UCHUN MOBIL TUZATISHLAR
   ================================================== */

/* === FEATURES — Nima uchun biz (kartalar mobilda zichroq) === */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 30px;
    }
    .feature-item {
        padding: 32px 18px 28px;
    }
    .feature-corner { width: 12px; height: 12px; }
    .feature-icon { width: 54px; height: 54px; font-size: 1.2rem; margin-bottom: 18px; }
    .feature-title { font-size: 1rem; margin-bottom: 10px; }
    .feature-text { font-size: 0.82rem; line-height: 1.55; }
}
@media (max-width: 480px) {
    .features-grid { grid-template-columns: 1fr; gap: 14px; }
    .feature-item { padding: 30px 22px 26px; }
}

/* === STORY — Bizning hikoya (about hero) === */
@media (max-width: 600px) {
    .story-section { padding: 50px 0; }
    .story-title-1, .story-title-2 { font-size: 1.5rem !important; }
    .story-lead { font-size: 0.95rem; }
    .story-quote p { font-size: 0.95rem; }
    .story-text { font-size: 0.92rem; }
    .story-stat-num { font-size: 1.55rem; }
    .story-stat-lbl { font-size: 0.65rem; }
}

/* === PROCESS — Bizning jarayonimiz === */
@media (max-width: 600px) {
    .process-num { font-size: 2.2rem; }
    .process-title { font-size: 1.1rem; }
    .process-desc { font-size: 0.86rem; }
    .process-icon { font-size: 1rem; }
}

/* === REVIEWS — sharhlar karuseli mobilda === */
@media (max-width: 768px) {
    .reviews-carousel { padding: 0; }
    .review-card { padding: 26px 22px; }
    .review-text { font-size: 0.95rem; line-height: 1.55; }
    .carousel-btn {
        width: 36px;
        height: 36px;
    }
    .reviews-section::before,
    .reviews-section::after { opacity: 0.4; }
}

/* === PROJECTS — mobilda 1 ustun, ravon === */
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .project-card .project-image { aspect-ratio: 4/3; }
}

/* === SERVICES (xizmatlar sahifa) — mobilda kichikroq, vertikal === */
@media (max-width: 768px) {
    .service-item,
    .service-item--reversed {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 0;
    }
    .service-grid { grid-template-columns: 1fr; gap: 24px; }
    .service-bg-num { font-size: 8rem; opacity: 0.04; }
    .service-heading { font-size: 1.5rem; }
    .service-lead { font-size: 0.95rem; }
}
@media (max-width: 480px) {
    .service-bg-num { display: none; } /* Joy tejash */
    .service-num-badge { font-size: 0.9rem; }
    .service-icon-badge { width: 48px; height: 48px; font-size: 1rem; }
}

/* === FOOTER (premium) — verify mobil === */
@media (max-width: 600px) {
    .footer { padding: 44px 0 20px; }
    .footer-brand { gap: 12px; }
    .footer-brand-icon { width: 42px; height: 42px; }
    .footer-brand-line-1 { font-size: 0.95rem; }
    .footer-brand-line-2 { font-size: 0.6rem; }
    .footer-bottom { font-size: 0.75rem; }
}

/* === CONTACT (kontakt sahifasi) — mobilda yumshoqroq === */
@media (max-width: 600px) {
    .contact-info-title,
    .contact-form-title { font-size: 1.35rem; }
    .contact-info-lead,
    .contact-form-subtitle { font-size: 0.86rem; }
    .form-group--floating .form-input,
    .form-group--floating .form-textarea,
    .form-group--floating .form-select {
        font-size: 16px; /* iOS uchun */
        padding: 20px 14px 8px;
    }
}

/* === HERO SCROLL INDIKATOR — kichik ekranlarda yashirinadi === */
@media (max-width: 480px) {
    .hero-scroll { display: none; }
}

/* === SCROLL PROGRESS BAR — biroz qalinroq mobilda (sezilarliroq) === */
@media (max-width: 768px) {
    .scroll-progress { height: 2.5px; }
}

/* === TOAST — mobilda toʻliq kenglik === */
@media (max-width: 600px) {
    .toast {
        padding: 14px 16px;
        font-size: 0.9rem;
    }
    .toast-title { font-size: 0.88rem; }
    .toast-message { font-size: 0.82rem; }
}

/* === ABOUT KOLLAJ — kichik ekranlarda zichroq === */
@media (max-width: 480px) {
    .about-collage {
        min-height: 380px;
    }
    .collage-img-1 { width: 50%; height: 34%; }
    .collage-img-2 { width: 80%; height: 52%; left: 8%; }
    .collage-img-3 { width: 60%; height: 38%; }
}

/* === HEADER LOGO — kichik ekranlarda mukammal moslashuv === */
@media (max-width: 600px) {
    .logo {
        gap: 8px;
    }
    .logo-icon { width: 32px; height: 32px; }
    .logo-text { font-size: 0.9rem; letter-spacing: 0.05em; }
    .logo-subtitle { font-size: 0.55rem; letter-spacing: 0.2em; }
}

/* === Touch device — hover effektlarni o'chirish (sticky hover oldini olish) === */
@media (hover: none) and (pointer: coarse) {
    .feature-item:hover,
    .process-step:hover,
    .project-card:hover,
    .service-card:hover {
        transform: none;
    }
    .feature-item:hover .feature-corner {
        width: 16px;
        height: 16px;
        box-shadow: none;
    }
}