/* ===================================
   NET OTOMOTİV - RESPONSIVE STYLES
   Mobile-First Responsive Design
   ================================ */

/* === TABLET - 1180px ve altı === */
@media (max-width: 1180px) {
    .container {
        padding: 0 var(--spacing-md);
    }

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

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

    .nav-menu {
        gap: var(--spacing-sm);
    }

    .nav-menu > li > a {
        padding: var(--spacing-xs);
    }
}

/* === MOBILE EXTRA - 880px ve altı === */
@media (max-width: 880px) {
    /* Header hamburger menu */
    .mobile-menu-toggle {
        display: block !important;
    }

    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: scale(1.05);
    }

    .main-navigation {
        order: 4;
        width: 100%;
        margin-top: 16px;
    }

    /* Tailwind handles everything now - Keep minimal custom styles */

    .btn-primary {
        width: 100%;
        text-align: center;
        margin-top: var(--spacing-sm);
    }

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

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

    .section-header h2 {
        font-size: 32px;
    }

    /* Footer container - reduce padding on tablet */
    .site-footer .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Footer - tablet size (stack to single column) */
    .footer-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
    }

    /* Footer left/right columns - center on tablet */
    .footer-left-col,
    .footer-right-col {
        text-align: center !important;
    }

    .footer-left-col .footer-logo {
        margin: 0 auto;
    }

    /* Footer links grid - tablet (3 columns stacked) */
    .footer-links-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    /* Footer phone - smaller on tablet */
    .footer-phone {
        font-size: 28px !important;
        line-height: 1.3;
    }

    .footer-email {
        font-size: 15px !important;
    }

    /* Footer contact info spacing */
    .footer-contact-info {
        margin-bottom: 2.5rem !important;
    }

    /* Footer logo - tablet */
    .footer-logo {
        height: 75px !important;
    }

    /* Social media buttons - tablet */
    .site-footer a[href*="wa.me"],
    .site-footer a[href*="sahibinden.com"] {
        width: 46px !important;
        height: 46px !important;
    }
}

/* === GLOBAL MOBILE PADDING FIX === */
/* Ensure all page sections have at least 16px left/right padding on mobile */
@media (max-width: 767px) {
    section > .container,
    section > div > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* Hero containers with inline padding overrides */
    .container[style*="padding-left"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* === PAGE-SPECIFIC RESPONSIVE GRIDS === */
/* Contact page: form + map grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-80);
}

/* About page: mission + vision grid */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-70);
}

@media (max-width: 767px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .contact-map-wrap {
        height: 260px !important;
    }
    .mv-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .mv-card h3 {
        font-size: 22px !important;
    }
}

/* === MOBILE - 767px ve altı === */
@media (max-width: 767px) {
    /* Typography */
    :root {
        --font-size-xlarge: 28px;
        --font-size-xxlarge: 36px;
        --spacing-lg: 32px;
        --spacing-xl: 48px;
    }

    /* Hero Section - Mobile */
    /* Hero typography handled by Tailwind classes in Index.cshtml */

    /* About + Stats - Stack on Mobile */
    section > .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-50) !important;
    }

    /* Brands Section (2 columns) - Stack on Mobile */
    section div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Services Section (3 columns) - Stack on Mobile */
    section div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Why Choose Us - Stack columns */
    section div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Stats Section - Stack columns */
    section div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Large Numbers - Reduce size on mobile */
    section div[style*="font-size: 72px"] {
        font-size: 48px !important;
    }

    section div[style*="font-size: 56px"] {
        font-size: 36px !important;
    }

    section h1[style*="font-size: 52px"] {
        font-size: clamp(26px, 7vw, 52px) !important;
    }

    section h1[style*="font-size: clamp(26px, 6vw, 52px)"] {
        font-size: clamp(26px, 7vw, 40px) !important;
    }

    /* Services/Index image placeholder - shrink on mobile */
    section div[style*="height: 500px"][style*="background: var(--bg-light)"] {
        height: 180px !important;
    }

    section h2[style*="font-size: 42px"] {
        font-size: clamp(22px, 5vw, 32px) !important;
    }

    section h2[style*="font-size: 38px"] {
        font-size: clamp(20px, 5vw, 30px) !important;
    }

    section h3[style*="font-size: 28px"] {
        font-size: 22px !important;
    }

    section h3[style*="font-size: 24px"] {
        font-size: 20px !important;
    }

    section h3[style*="font-size: 22px"] {
        font-size: 18px !important;
    }

    /* Feature boxes with icons - Stack on mobile */
    section div[style*="display: flex"][style*="gap: var(--spacing-50)"] {
        flex-direction: column !important;
        text-align: center;
    }

    /* Icon boxes - Center on mobile */
    section div[style*="width: 80px; height: 80px"] {
        margin: 0 auto;
    }

    /* Buttons Container - Handled by Tailwind in Index.cshtml */
    /* Tailwind: flex-col sm:flex-row + w-full sm:w-auto */

    /* Header */
    .header-top {
        padding: 6px 0;
    }

    .header-top-content {
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: center;
    }

    .header-contact {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .header-contact span {
        margin-right: 0;
        font-size: 13px;
    }

    .header-main {
        padding: var(--spacing-sm) 0;
    }

    .site-logo img {
        height: 40px;
    }

    .logo-text {
        font-size: 18px;
    }

    .admin-toolbar {
        flex-direction: column;
        margin-left: 0;
        margin-top: var(--spacing-sm);
        width: 100%;
    }

    .admin-badge,
    .btn-admin-logout {
        width: 100%;
        text-align: center;
    }


    .section-header h2 {
        font-size: 24px;
    }

    .section-header p {
        font-size: var(--font-size-base);
    }

    /* Grid */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Footer container - smaller padding on mobile */
    .site-footer .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-col ul li a:hover {
        padding-left: 0;
    }

    /* Footer - mobile single column */
    .footer-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    /* Footer left/right columns - center on mobile */
    .footer-left-col,
    .footer-right-col {
        text-align: center !important;
    }

    .footer-left-col img {
        margin: 0 auto;
    }

    /* Footer links grid - stack vertically on mobile */
    .footer-links-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center;
    }

    /* Footer contact info - smaller on mobile */
    .footer-phone {
        font-size: 24px !important;
        line-height: 1.2;
        letter-spacing: 0.5px !important;
    }

    .footer-email {
        font-size: 14px !important;
    }

    .footer-contact-info {
        margin-bottom: 1.5rem !important;
    }

    /* Footer column headings */
    .site-footer h4 {
        font-size: 15px !important;
        margin-bottom: 1rem !important;
    }

    /* Footer links */
    .site-footer ul li {
        margin-bottom: 8px !important;
    }

    .site-footer ul li a {
        font-size: 13px !important;
    }

    /* Footer social - center */
    .site-footer div[style*="display: flex; gap: 14px"] {
        justify-content: center !important;
        margin: 0 auto;
    }

    /* Footer logo - mobile */
    .footer-logo {
        max-height: 65px !important;
        margin: 0 auto;
    }

    /* Footer company info - mobile */
    .footer-company-info {
        text-align: center !important;
        font-size: 14px !important;
        max-width: 100% !important;
        padding: 0 1rem;
    }

    /* Footer menu lists - center on mobile */
    .site-footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .site-footer h4 {
        text-align: center !important;
    }

    /* Footer social media buttons - mobile */
    .site-footer a[href*="wa.me"],
    .site-footer a[href*="sahibinden.com"] {
        width: 44px !important;
        height: 44px !important;
    }

    /* Footer bottom copyright */
    .site-footer > div:first-child {
        padding: 3rem 0 2rem !important;
    }

    .footer-main-grid {
        margin-bottom: 2rem !important;
    }

    .site-footer .container > div > div:last-child {
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .site-footer .container > div > div:last-child p {
        font-size: 12px !important;
    }

    /* FAB Buttons */
    .fab-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
        right: 15px;
    }

    .whatsapp-fab {
        bottom: 80px;
    }

    .sahibinden-fab {
        bottom: 20px;
    }

    /* Cards */
    .card-image {
        height: 200px;
    }

    .card-body {
        padding: var(--spacing-sm);
    }

    .card-title {
        font-size: var(--font-size-base);
    }

    /* Buttons */
    .btn {
        padding: 10px 24px;
        font-size: var(--font-size-small);
    }

    /* Forms */
    .form-control {
        padding: 10px 12px;
        font-size: var(--font-size-small);
    }
}

/* === SMALL MOBILE - 480px ve altı === */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }

    /* Footer container - even smaller padding on small mobile */
    .site-footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    :root {
        --font-size-xlarge: 24px;
        --font-size-xxlarge: 32px;
    }

    .section-header h2 {
        font-size: 22px;
    }

    .card-image {
        height: 180px;
    }

    /* Footer - Extra small mobile */
    .footer-phone {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .footer-email {
        font-size: 13px !important;
    }

    .site-footer h4 {
        font-size: 14px !important;
    }

    .site-footer ul li a {
        font-size: 12px !important;
    }

    /* Footer logo - smaller on tiny mobile */
    .footer-logo,
    .site-footer img[alt*="Net Otomotiv"] {
        max-height: 55px !important;
    }

    /* Footer overall padding - very small mobile */
    .site-footer > div:first-child {
        padding: 2.5rem 0 1.5rem !important;
    }

    .footer-links-grid {
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .footer-contact-info {
        margin-bottom: 1.5rem !important;
    }

    .footer-company-info {
        margin-bottom: 1.5rem !important;
        font-size: 13px !important;
    }

    /* FAB Buttons */
    .fab-button {
        width: 45px;
        height: 45px;
        font-size: 20px;
        right: 10px;
    }

    .whatsapp-fab {
        bottom: 70px;
    }

    .sahibinden-fab {
        bottom: 15px;
    }
}

/* === LANDSCAPE ORIENTATION === */
@media (max-width: 880px) and (orientation: landscape) {
    .header-main {
        padding: var(--spacing-xs) 0;
    }

    .nav-menu {
        max-height: 300px;
        overflow-y: auto;
    }

    section {
        padding: var(--spacing-md) 0;
    }
}

/* === PRINT STYLES === */
@media print {
    .site-header,
    .site-footer,
    .fab-button,
    .admin-toolbar {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        text-decoration: underline;
    }

    .container {
        max-width: 100%;
    }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #FF4500;
        --text-dark: #000000;
        --border-color: #000000;
    }

    .btn {
        border-width: 3px;
    }

    .form-control:focus {
        border-width: 3px;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}