/* ===========================================================================
   responsive/mobile.css
   Breakpoints: 1440+ / 1280 / 1024 / 768 / 480 / 375
   Real layout changes per breakpoint — not just a scaled-down desktop.
   =========================================================================== */

/* ---------------------------------------------------------------
   >= 1440px — full container
   --------------------------------------------------------------- */
@media (min-width: 1440px) {
    :root { --container: 1347px; }
}

/* ---------------------------------------------------------------
   <= 1366px — tighten the right header cluster
   --------------------------------------------------------------- */
@media (max-width: 1366px) {
    .header-desktop-search1 { width: 280px; }
    .header-desktop-navbutton-box a { padding-inline: 10px; font-size: 12px; }
    .header-phone-box { padding-inline: 10px; font-size: 12.5px; }
    .top-level-menu > li > a > span { padding-inline: 18px; font-size: 14.5px; }
}

/* ---------------------------------------------------------------
   <= 1280px — 3-up product grid, secondary phone drops
   --------------------------------------------------------------- */
@media (max-width: 1280px) {
    :root { --gutter: 20px; }

    .home-product-tabcontent-in,
    .search-page .cat-detail-products,
    .related-products .cat-detail-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .brand-slide { flex-basis: calc((100% - 3 * 18px) / 4); }
    .kayan-banner-track > a { flex-basis: calc((100% - 2 * 16px) / 3); }

    /* keep only the primary phone number */
    .header-phones-wrapper .header-phone-box:nth-child(n + 2) { display: none; }

    .urun-detay-main-in { grid-template-columns: 520px minmax(0, 1fr); gap: 30px; }
    .cat-detail-main-div-in { grid-template-columns: 270px minmax(0, 1fr); }
    .cat-left-main { width: 100%; padding-right: 24px; }
}

/* ---------------------------------------------------------------
   <= 1150px — nav bar scrolls, header links collapse
   --------------------------------------------------------------- */
@media (max-width: 1150px) {
    .header-desktop-navbutton-box { display: none; }

    .head-new-area-left { overflow-x: auto; scrollbar-width: none; }
    .head-new-area-left::-webkit-scrollbar { display: none; }
    .top-level-menu { min-width: max-content; }
}

/* ---------------------------------------------------------------
   <= 1024px — tablet: gallery stacks, blog 2-up, sidebar collapses
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root { --header-h: auto; }

    .header-desktop-main-row { column-gap: 18px; }
    .header-desktop-search1 { width: 240px; }
    .header-desktop-logo-div img { width: 140px; height: 74px; }

    /* product detail becomes a single column */
    .urun-detay-main-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .urun-detay-sol-alan { position: static; max-width: 600px; margin-inline: auto; width: 100%; }

    /* category: sidebar becomes a collapsible drawer above the grid */
    .cat-detail-main-div-in {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "side" "main";
    }
    .cat-left-main { width: 100%; padding-right: 0; }
    .cat-left-column {
        display: none;
        padding: 20px;
        background: var(--surface-alt);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }
    .cat-left-column.is-open { display: block; }
    .cat-left-box-main { margin-bottom: 20px; }

    .filter-toggle-mobile {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding-inline: 15px;
        background: #fff;
        border: 1px solid var(--line-input);
        border-radius: var(--radius-sm);
        font-family: var(--font-ui); font-size: 13px; font-weight: 600;
        color: var(--ink-strong);
        cursor: pointer;
    }
    .filter-toggle-mobile:hover { background: var(--surface-alt); }

    .cat-detail-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .blog-grid,
    .bloglar-box-main-div { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .blog-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .blog-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cart-layout { grid-template-columns: minmax(0, 1fr); }
    .cart-summary { position: static; }

    .quote-layout { grid-template-columns: minmax(0, 1fr); }
    .quote-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contact-layout { grid-template-columns: minmax(0, 1fr); }

    .sablon2-level-menu { padding: 28px 30px; }
    .sablon2-level-menu-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 20px 16px; }
}

/* ---------------------------------------------------------------
   <= 991px — switch to the mobile header + drawer navigation
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .desktop-header-area { display: none; }
    .header-mobile-view { display: block; }
    .prottoguard-mobile-menu { display: block; }
    .patent-side-button { display: none; }

    /* leave room for the fixed bottom bar */
    body { padding-bottom: var(--mobile-bar-h); }

    .home-product-tabcontent-in,
    .cat-detail-products,
    .search-page .cat-detail-products,
    .related-products .cat-detail-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }

    .brand-slide { flex-basis: calc((100% - 2 * 18px) / 3); }
    .kayan-banner-track > a { flex-basis: calc((100% - 16px) / 2); }

    .slider-main-div { padding-inline: 0; }
    .ustsliders { border-radius: 0; }
    .slide-top-desktop img { aspect-ratio: 16 / 9; }

    .video-block { max-width: 100%; border-radius: 0; margin-inline: 0; }

    .modules-head-forbg-text { font-size: 21px; }
    .modules-head-text-h { font-size: 25px; }

    .blog-box-h { font-size: 20px; }
    .blog-box-text-area { padding: 18px 20px 22px; }

    .urun-detay-sag-alan-baslik { font-size: 22px; }
    .blog-detail-title { font-size: 27px; }

    .page-head h1, .cat-right-head-text { font-size: 22px; }

    /* cart page turns into stacked cards */
    .cart-table-head { display: none; }
    .cart-row {
        grid-template-columns: 78px minmax(0, 1fr);
        grid-template-areas:
            "img  name"
            "img  meta"
            "qty  total";
        gap: 10px 14px;
    }
    .cart-row-img { grid-area: img; width: 78px; height: 78px; }
    .cart-row-main { grid-area: name; }
    .cart-row-qty { grid-area: qty; }
    .cart-row-total { grid-area: total; text-align: right; align-self: center; }
    .cart-row-remove { position: absolute; top: 12px; right: 10px; }
    .cart-row { position: relative; }
}

/* ---------------------------------------------------------------
   <= 768px — single-column forms, tighter rhythm
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    :root { --gutter: 16px; }

    .quote-form-grid { grid-template-columns: minmax(0, 1fr); }
    .quote-aside { grid-template-columns: minmax(0, 1fr); }
    .blog-sidebar { grid-template-columns: minmax(0, 1fr); }

    .blog-grid,
    .bloglar-box-main-div { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    .brand-slide { flex-basis: calc((100% - 18px) / 2); }

    .cat-right-elements { padding: 12px; }
    .cat-right-elements-right { width: 100%; justify-content: space-between; }
    .cat-right-elements-right-siralama { flex: 1 1 auto; }
    .cat-right-elements-right-siralama select { width: 100%; }

    .gc-thumb { flex-basis: 84px; width: 84px; height: 84px; }
    .gc-thumbs-area-prev, .gc-thumbs-area-next { height: 84px; }

    .quote-form-card { padding: 20px; }
    .pg-section { padding-block: 30px; }

    .footer-pill { border-radius: var(--radius); padding: 16px 20px; text-align: center; }

    .search-hero form { flex-direction: column; }
    .search-hero .btn-base { width: 100%; }

    .product-buy-row { flex-wrap: wrap; }
    .product-buy-row .qty-stepper { width: 100%; }
    .product_detail_addcart_button { flex-basis: 100%; }
}

/* ---------------------------------------------------------------
   <= 480px — compact phone layout
   --------------------------------------------------------------- */
@media (max-width: 480px) {
    .home-product-tabcontent-in,
    .cat-detail-products,
    .search-page .cat-detail-products,
    .related-products .cat-detail-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }

    .cat-detail-products-box-info { padding: 10px 11px 13px; }
    .cat-detail-products-box-h { font-size: 13.5px; line-height: 20px; min-height: 40px; }
    .cat-detail-products-box-marka { font-size: 11.5px; }
    .cat-detail-products-box-price { font-size: 15px; }
    .card-cart-btn { width: 100%; }
    .cat-detail-products-box-foot { flex-direction: column; align-items: stretch; gap: 8px; }

    /* list view collapses back to a card on small phones */
    .cat-detail-products.is-list .cat-detail-products-box { flex-direction: column; }
    .cat-detail-products.is-list .cat-detail-products-box-img { flex-basis: auto; }

    .mobile-header-logo img { height: 38px; }

    .modules-head-forbg-text { font-size: 18px; }
    .modules-head-text-h { font-size: 21px; }
    .blog-box-h { font-size: 18px; }
    .blog-detail-title { font-size: 23px; }
    .urun-detay-sag-alan-baslik { font-size: 19px; }
    .product-price-now { font-size: 25px; }


    .home-product-tablinks { min-width: 0; margin: 6px; font-size: 13.5px; padding-inline: 13px; }
    .home-product-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .home-product-tabs::-webkit-scrollbar { display: none; }

    .pg-mobile-item { font-size: 9px; }
    .pg-mobile-item i { font-size: 18px; }

    .cart-row { grid-template-columns: 64px minmax(0, 1fr); }
    .cart-row-img { width: 64px; height: 64px; }

    .btn-white { height: 50px; font-size: 15px; }
    .pg-pagination a, .pg-pagination span { min-width: 36px; height: 36px; padding-inline: 9px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------
   <= 375px — smallest supported width
   --------------------------------------------------------------- */
@media (max-width: 375px) {
    :root { --gutter: 12px; }

    .home-product-tabcontent-in,
    .cat-detail-products { gap: 12px 10px; }

    .cat-detail-products-box-h { font-size: 12.5px; }
    .mobile-header-logo img { height: 34px; }
    .mobile_side_wrap { width: 92vw; }

    .quote-form-card { padding: 16px; }
    .cart-summary { padding: 16px; }

    .footer-pill { font-size: 12px; }
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------
   Print
   --------------------------------------------------------------- */
@media print {
    .header-main-div, .prottoguard-mobile-menu, .patent-side-button,
    .drawer-scrim, .mobile_side_wrap, .hizliepet_side, .toast-stack { display: none !important; }
    body { padding-bottom: 0; }
}