/* ==========================================================
   Ekin Havalandirma - Mobile & Tablet Responsive Overrides
   Loaded AFTER inline <style> blocks so selectors here win.
   Uses !important strategically to beat inline element styles.
   ========================================================== */

/* --- Global anti-overflow safety net --- */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; }

/* ==========================================================
   WHATSAPP FLOATING BUTTON (fixed, bottom-left, ping effect)
   Loaded on every page → visible site-wide.
   ========================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    z-index: 999;
}
.whatsapp-float a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    font-size: 1.9rem;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
    transition: transform 0.3s, background 0.3s;
}
.whatsapp-float a:hover {
    background: #1ebe5b;
    transform: scale(1.08);
}
/* Ping ripple effect */
.whatsapp-float::before,
.whatsapp-float::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    opacity: 0;
    animation: whatsapp-ping 2.2s ease-out infinite;
}
.whatsapp-float::after {
    animation-delay: 1.1s;
}
@keyframes whatsapp-ping {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float::before,
    .whatsapp-float::after { animation: none; }
}

/* Smoother text rendering on mobile */
body { -webkit-text-size-adjust: 100%; }

/* Ensure UIkit containers and .container respect viewport width */
.uk-container, .container { box-sizing: border-box; }

/* Break-word safety only on content that may carry long strings/URLs */
.contact-info-card p, .footer-links p, .content-section p, pre, code { overflow-wrap: break-word; }

/* Grid/flex children should not stretch beyond track due to min-content */
.services-grid > *,
.products-grid > *,
.projects-grid > *,
.about-stats > *,
.stats-grid > *,
.contact-grid > * { min-width: 0; }

/* ==========================================================
   TABLET (641px - 959px) — UIkit @m breakpoint is 960px
   Mobile header shows in this range; content still needs
   intermediate column layouts.
   ========================================================== */
@media (min-width: 641px) and (max-width: 959px) {
    .uk-container, .container { padding-left: 18px; padding-right: 18px; }

    /* Hero slideshow */
    .uk-slideshow-items { min-height: 340px !important; max-height: 480px !important; }
    .slide-title-block h3 { font-size: 1.6rem !important; }

    /* Products dark — 2 columns on tablet */
    .products-dark { padding: 40px 0 !important; }
    .products-dark .uk-grid > div { width: 50% !important; }
    .products-dark .product-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 25px 20px !important;
    }
    .products-dark .uk-grid > div:nth-child(odd) .product-col { border-right: 1px solid rgba(255,255,255,0.08) !important; }

    /* Kalite section */
    .kalite-section { min-height: 340px !important; }
    .kalite-section h1 { font-size: 2rem !important; }

    /* Reference marquee */
    .ref-marquee-item { height: 180px !important; }
    .ref-logo { max-height: 150px !important; }

    /* About section */
    .about-section { min-height: 480px !important; }
    .about-content { max-width: 65% !important; padding: 30px 5% !important; }

    /* Footer — UIkit @m is 960, so on tablets the 1-3 columns don't apply;
       children are full width. Make that cleaner. */
    .tm-footer .uk-grid > * { margin-top: 20px; }
    .tm-footer .uk-grid > .uk-width-expand\@m { display: none; }

    /* Inner page product / service grids — always 2 cols on tablet */
    .services-grid, .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Certificates inline 3-col grid → 2 cols */
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact grid */
    .contact-grid { grid-template-columns: 1fr !important; gap: 35px !important; }
}

/* ==========================================================
   MOBILE (≤ 640px)
   ========================================================== */
@media (max-width: 640px) {
    /* Root rhythm */
    .uk-container, .container { padding-left: 14px !important; padding-right: 14px !important; }
    body { font-size: 15px; }

    /* --- Mobile Header --- */
    .tm-header-mobile .uk-logo img { height: 44px !important; }
    .tm-header-mobile .uk-navbar-container { padding: 4px 0; }
    .tm-header-mobile .uk-navbar { min-height: 58px; }
    .tm-header-mobile .uk-navbar-toggle {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* --- Offcanvas menu — bigger tap targets --- */
    #mobile-menu .uk-offcanvas-bar { padding: 50px 20px 20px; width: 85vw; max-width: 320px; }
    #mobile-menu .uk-nav > li > a { padding: 13px 10px !important; font-size: 1rem !important; }
    #mobile-menu .uk-nav-sub > li > a { padding: 10px 12px !important; font-size: 0.92rem !important; }
    #mobile-menu .uk-offcanvas-close { top: 10px; right: 10px; padding: 12px; }

    /* --- Hero slideshow --- */
    .uk-slideshow-items { min-height: 240px !important; max-height: 360px !important; }
    .slide-title-block {
        bottom: 22px !important;
        left: 5% !important;
        max-width: 90% !important;
    }
    .slide-title-block h3 {
        font-size: 1.15rem !important;
        padding-left: 12px !important;
        border-left-width: 4px !important;
        line-height: 1.2 !important;
    }
    .slider-nav.uk-slidenav {
        width: 38px !important; height: 38px !important;
    }
    .slider-nav.uk-position-center-left { left: 8px !important; }
    .slider-nav.uk-position-center-right { right: 8px !important; }
    .slider-nav.uk-slidenav svg { width: 14px !important; height: 14px !important; }

    /* --- Products dark: single column on phone --- */
    .products-dark { padding: 30px 0 !important; }
    .products-dark .uk-grid > div { width: 100% !important; }
    .products-dark .product-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        padding: 24px 18px !important;
    }
    .products-dark .uk-grid > div:last-child .product-col { border-bottom: none !important; }
    .products-dark .product-icon { height: 88px !important; margin-bottom: 14px !important; }
    .products-dark .product-icon img { max-height: 88px !important; }
    .products-dark h6.product-title { font-size: 0.85rem !important; min-height: 0 !important; margin-bottom: 10px !important; }
    .products-dark .product-desc { font-size: 0.78rem !important; }

    /* --- Kalite section --- */
    .kalite-section { min-height: 240px !important; background-attachment: scroll !important; padding: 40px 0 !important; }
    .kalite-section h1 { font-size: 1.3rem !important; padding: 0 14px; line-height: 1.3 !important; }

    /* --- References --- */
    .ref-section .uk-section { padding: 35px 0 !important; }
    .ref-section .uk-heading-line { margin-bottom: 20px !important; }
    .ref-section .uk-heading-line > span { font-size: 0.95rem !important; }
    .ref-marquee-item { height: 120px !important; padding: 0 10px !important; }
    .ref-logo { max-height: 95px !important; }

    /* --- About section (homepage) --- */
    .about-section { min-height: 320px !important; }
    .about-content {
        max-width: 100% !important;
        padding: 30px 18px !important;
    }
    .about-content .about-title { font-size: 1.05rem !important; margin-bottom: 14px !important; }
    .about-content p { font-size: 0.85rem !important; line-height: 1.65 !important; }

    /* --- Top bar hidden on mobile (UIkit uk-visible@m does this),
       but ensure icons still large enough if ever shown --- */
    .tm-toolbar .social-bar a { width: 36px !important; height: 36px !important; font-size: 0.85rem !important; margin-left: 6px; }

    /* --- Footer --- */
    .tm-footer .uk-section, .tm-footer .uk-section-small { padding: 30px 0 !important; }
    .tm-footer .uk-grid > * { margin-top: 18px; }
    .tm-footer .uk-grid > .uk-width-expand\@m { display: none; }
    .tm-footer .footer-logo { height: 50px !important; }
    .tm-footer .footer-heading { font-size: 0.95rem !important; }
    .tm-footer .footer-links p { font-size: 0.85rem !important; margin: 4px 0 !important; }
    .tm-footer .social-icon {
        width: 44px !important; height: 44px !important;
        margin: 0 8px 8px 0 !important;
        font-size: 1rem !important;
    }
    .footer-copyright, .tm-footer .footer-copyright {
        padding: 12px 15px !important;
        font-size: 0.72rem !important;
        line-height: 1.55 !important;
    }

    /* --- Page header (inner pages) --- */
    .page-header { padding: 28px 0 !important; }
    .page-header h1 { font-size: 1.25rem !important; line-height: 1.25 !important; }
    .page-header .breadcrumb {
        font-size: 0.75rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        row-gap: 4px;
    }
    .page-header .breadcrumb span { margin: 0 6px !important; }

    /* --- Content sections --- */
    section.section, section.section-alt, .content-section {
        padding: 35px 0 !important;
    }
    .section-header { margin-bottom: 30px !important; }
    .section-header h2 { font-size: 1.3rem !important; }
    .section-header p { font-size: 0.9rem !important; }

    .content-section h2, section.section h2 {
        font-size: 1.15rem !important;
        padding-left: 12px !important;
        border-left-width: 4px !important;
        line-height: 1.3 !important;
    }
    .content-section h3, section.section h3 { font-size: 1rem !important; }
    .content-section p, section.section p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }

    /* --- Services / Products grids → 1 column --- */
    .services-grid, .products-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .service-card, .product-card {
        padding: 24px 20px !important;
        text-align: center;
    }
    .service-card p, .product-card p { max-width: 100% !important; }
    .service-card .icon, .product-card .icon {
        width: 48px !important; height: 48px !important;
        font-size: 1.15rem !important;
        margin-bottom: 14px !important;
    }
    .service-card h3, .product-card h3 { font-size: 1rem !important; }
    .service-card p, .product-card p { font-size: 0.88rem !important; }

    /* Product-card with image */
    .product-card .product-card-image { height: 170px !important; }
    .product-card-body { padding: 16px !important; }

    /* --- Projects grid --- */
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .project-card { height: auto !important; }
    .project-card .project-image { height: 190px !important; }
    .project-card .project-caption { padding: 12px 14px !important; }

    /* Project filter buttons wrap & shrink */
    .projects-categories {
        justify-content: flex-start !important;
        gap: 6px !important;
        margin-bottom: 24px !important;
    }
    .projects-categories .cat-btn {
        font-size: 0.78rem !important;
        padding: 8px 12px !important;
        min-height: 36px;
    }

    /* --- Stats --- */
    .about-stats, .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 25px !important;
        padding-top: 25px !important;
    }
    .stat-item { padding: 8px !important; }
    .stat-item .stat-number { font-size: 1.7rem !important; }
    .stat-item .stat-label { font-size: 0.72rem !important; }

    /* --- About grid (inner pages) --- */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .about-image img { height: 280px !important; }
    .experience-badge { bottom: 15px !important; left: 15px !important; padding: 10px 14px !important; }
    .experience-badge .number { font-size: 1.3rem !important; }
    .experience-badge .text { font-size: 0.7rem !important; }

    /* --- Certificates --- */
    .certificate-card { padding: 22px 16px !important; }
    .certificate-card h4 { font-size: 0.9rem !important; }
    .certificate-card .cert-icon,
    .certificate-card .cert-icon i { font-size: 2rem !important; }

    /* --- Contact page --- */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .contact-info-card { margin-bottom: 22px !important; }
    .contact-info-card .icon {
        width: 42px !important; height: 42px !important;
        font-size: 0.95rem !important;
    }
    .contact-info-card h4 { font-size: 0.95rem !important; }
    .contact-info-card p { font-size: 0.88rem !important; word-break: break-word; }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 16px !important; /* prevents iOS zoom-on-focus */
        padding: 11px 13px !important;
    }
    .contact-form .btn { width: 100%; }
    .contact-map { margin-top: 30px !important; }
    .contact-map iframe { height: 280px !important; }

    /* --- Inline element-style grid overrides --- */
    /* 1fr 1fr → 1fr (contact form 2-col rows) */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* repeat(2,1fr) → 1fr (hizmetlerimiz "Neden Ekin" grid) */
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns: repeat(2,1fr)"],
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* repeat(3,1fr) → 1fr (sertifikalarimiz grid) */
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* --- Buttons --- */
    .btn { padding: 12px 22px !important; font-size: 0.85rem !important; border-radius: 8px; }

    /* --- CTA section --- */
    .cta-section { padding: 40px 0 !important; }
    .cta-section h2 { font-size: 1.3rem !important; margin-bottom: 12px !important; }
    .cta-section p { font-size: 0.88rem !important; line-height: 1.65 !important; margin-bottom: 22px !important; }

    /* --- Scroll top --- */
    .scroll-top, .scroll-top-btn {
        bottom: 16px !important;
        right: 16px !important;
        width: 42px !important;
        height: 42px !important;
    }

    /* --- WhatsApp float --- */
    .whatsapp-float {
        bottom: 16px !important;
        left: 16px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .whatsapp-float a { font-size: 1.7rem !important; }
    .whatsapp-float::before,
    .whatsapp-float::after {
        width: 50px !important;
        height: 50px !important;
        margin: -25px 0 0 -25px !important;
    }

    /* Images inside cards keep aspect */
    .project-card img, .product-card img, .service-card img { display: block; }
}

/* ==========================================================
   VERY SMALL MOBILE (≤ 380px)
   ========================================================== */
@media (max-width: 380px) {
    .uk-container, .container { padding-left: 12px !important; padding-right: 12px !important; }
    .tm-header-mobile .uk-logo img { height: 38px !important; }
    .slide-title-block h3 { font-size: 1rem !important; padding-left: 10px !important; }
    .page-header h1 { font-size: 1.1rem !important; }
    .section-header h2 { font-size: 1.15rem !important; }
    .products-dark h6.product-title { font-size: 0.8rem !important; }
    .about-stats, .stats-grid { grid-template-columns: 1fr !important; }
    .stat-item .stat-number { font-size: 1.5rem !important; }
    .contact-info-card p { font-size: 0.82rem !important; }
    .projects-categories .cat-btn { font-size: 0.72rem !important; padding: 7px 10px !important; }
    .tm-footer .social-icon { margin: 0 6px 6px 0 !important; }
}

/* ==========================================================
   DATA TABLES (teknik-bilgiler page)
   ========================================================== */
@media (max-width: 640px) {
    table { font-size: 0.82rem !important; }
    table th, table td { padding: 8px 10px !important; font-size: 0.8rem !important; }
    table thead th { font-size: 0.78rem !important; }
    /* Ensure wrapped table containers scroll instead of overflow */
    [style*="overflow-x:auto"] table, [style*="overflow-x: auto"] table {
        min-width: 480px;
    }
}

/* ==========================================================
   TOUCH-DEVICE TAP TARGETS (phones + tablets, any size)
   ========================================================== */
@media (hover: none) and (pointer: coarse) {
    a, button, .cat-btn, .btn, .social-icon, .uk-navbar-toggle {
        touch-action: manipulation;
    }
    /* Disable parallax scale transforms that can cause jank on mobile */
    .hero-slider .slide-bg { transform: none !important; }
}

/* ==========================================================
   PRINT-safe & misc polish
   ========================================================== */
@media (max-width: 960px) {
    /* UIkit parallax can cause horizontal shift on small screens */
    [uk-slideshow-parallax] { transform: none; }
}