/* =============================================
   MEF YAPI & İNŞAAT - RESPONSIVE STYLES
   Mobile-First Approach
   ============================================= */

/* ============ MOBILE (max 767px) - Hero Background Fix ============ */
@media (max-width: 767px) {

    /* Hero Section - Full Screen Mobile Optimization */
    .hero {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        max-height: 100vh;
        max-height: 100dvh;
    }

    .hero__video-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* CRITICAL: Arka plan görseli mobil için tam ekran optimize */
    .hero__bg-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Görsel boyutlandırma - görseli dikeyde %180 büyüterek siyah alanları ekran dışına it */
        background-size: auto 180% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        /* Mobil için özel zoom animasyonu */
        animation: slowZoomMobile 20s ease-in-out infinite alternate !important;
    }

    @keyframes slowZoomMobile {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.1);
        }
    }

    /* Hero overlay mobil için optimize edilmiş gradient */
    .hero__overlay {
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.3) 30%,
                rgba(0, 0, 0, 0.4) 60%,
                rgba(0, 0, 0, 0.7) 100%) !important;
    }

    /* Hero içerik mobil için tam ekran ortalama */
    .hero__content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: var(--space-lg) !important;
        padding-top: 0 !important;
        padding-bottom: 15vh !important;
        text-align: center !important;
    }

    /* Logo mobilde kare oranı korunarak büyük ve belirgin */
    .hero__logo-img {
        /* Kare logo - en boy oranı korunuyor */
        width: 280px !important;
        height: auto !important;
        max-width: 70vw !important;
        max-height: none !important;
        /* style.css'teki 140px kısıtlamasını override et */
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        /* Margin ve konumlandırma */
        margin: 0 auto var(--space-lg) !important;
        display: block !important;
        /* Orijinal filter ayarları korunuyor */
        filter: invert(1) !important;
        mix-blend-mode: screen !important;
        /* Animasyon korunuyor */
        animation: logoReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        animation-delay: 0.2s !important;
    }

    /* Slogan mobilde daha okunabilir */
    .hero__slogan {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.3 !important;
        margin-top: var(--space-md) !important;
    }

    /* Language switcher mobilde gizle (hamburger menüde gösterilecek) */
    .lang-switcher {
        display: none !important;
    }

    /* Mobile Language Switcher - hamburger menüde göster */
    .mobile-lang-switcher {
        display: flex !important;
        gap: 0.5rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: var(--space-xl);
        padding-top: var(--space-lg);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 25;
    }

    .mobile-lang-switcher .lang-switcher__btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.7rem;
        min-width: 40px;
        min-height: 34px;
    }
}

/* ============ VERY SMALL MOBILE (max 375px) ============ */
@media (max-width: 375px) {
    .hero__bg-image {
        /* Çok küçük ekranlar için daha fazla yakınlaştırma */
        background-size: auto 200% !important;
    }

    @keyframes slowZoomMobile {
        0% {
            transform: scale(1.3);
        }

        100% {
            transform: scale(1.5);
        }
    }

    .hero__logo-img {
        width: 220px !important;
    }

    .hero__slogan {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }
}

/* ============ TABLET (768px+) ============ */
@media (min-width: 768px) {

    /* Typography */
    h1 {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    /* Container */
    .container {
        padding: 0 var(--space-xl);
    }

    /* Header */
    .header__logo img {
        height: 50px;
    }

    /* Hero */
    .hero__logo {
        width: 150px;
    }

    .hero__title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .hero__slogan {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }

    /* About Preview */
    .about-preview__grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-preview__content {
        order: 1;
    }

    .about-preview__image {
        order: 2;
    }

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

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

    /* Instagram */
    .instagram__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }

    .footer__brand {
        text-align: left;
    }

    .footer__social {
        justify-content: flex-start;
    }

    /* Manifesto */
    .manifesto-section__grid {
        grid-template-columns: 1fr 1fr;
    }

    .manifesto-section:nth-child(even) .manifesto-section__content {
        order: 2;
    }

    .manifesto-section:nth-child(even) .manifesto-section__image {
        order: 1;
    }

    /* Vision Gallery */
    .vision-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============ DESKTOP (1024px+) ============ */
@media (min-width: 1024px) {

    /* Header - Show Desktop Nav */
    .nav {
        display: block;
    }

    .hamburger {
        display: none;
    }

    .header__logo img {
        height: 50px;
    }

    /* Hero */
    .hero__logo {
        width: 180px;
    }

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

    /* Instagram */
    .instagram__grid {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* Manifesto */
    .manifesto-section__number {
        font-size: 6rem;
    }

    /* Vision Gallery */
    .vision-gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vision-card--large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .vision-card--large .vision-card__image {
        aspect-ratio: 1;
    }
}

/* ============ LARGE DESKTOP (1400px+) ============ */
@media (min-width: 1400px) {

    /* Typography scaling */
    html {
        font-size: 18px;
    }

    /* Hero */
    .hero__logo {
        width: 200px;
    }

    .manifesto-section__number {
        font-size: 8rem;
    }
}

/* ============ EXTRA LARGE (1920px+) ============ */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    .container--wide {
        max-width: 1800px;
    }
}

/* ============ MOTION PREFERENCES ============ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ============ LANDSCAPE MOBILE ============ */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        height: auto;
        padding: var(--space-4xl) 0;
    }

    .hero__scroll {
        display: none;
    }
}

/* ============ TOUCH DEVICES ============ */
@media (hover: none) {

    /* Remove hover effects for touch devices */
    .nav__link::after {
        display: none;
    }

    .card:hover {
        transform: none;
    }

    .vision-card__overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);
    }

    .vision-card:hover .vision-card__image {
        filter: grayscale(100%);
        transform: none;
    }
}

/* ============ HIGH CONTRAST MODE ============ */
@media (prefers-contrast: high) {
    :root {
        --color-grey: #999999;
        --color-silver: #AAAAAA;
        --color-light-grey: #444444;
    }

    .btn--outline,
    .btn--ghost {
        border-width: 2px;
    }
}

/* ============ PRINT STYLES ============ */
@media print {

    .header,
    .footer,
    .whatsapp-btn,
    .hero__video-container,
    .hero__scroll,
    .hamburger,
    .mobile-menu {
        display: none !important;
    }

    body {
        background-color: white;
        color: black;
    }

    .section {
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }
}