/*
PATCH 050 — BAŞAK TÜRK KURUMSAL / PROFESSIONAL MOBILE
Mobile/tablet only. Desktop identity, palette and existing content remain untouched.
*/

.mobile-nav-footer,
.mobile-nav-backdrop {
    display: none;
}

.mobile-header-languages,
.mobile-nav-inline-login,
.mobile-nav-theme-row,
.mobile-nav-login-compact {
    display: none;
}

@media (max-width: 1100px) {
    html {
        scroll-padding-top: 74px;
    }

    body.mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    .site-header {
        z-index: 1200 !important;
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
    }

    .site-header .container {
        width: min(100% - 28px, var(--max)) !important;
    }

    .header-row {
        height: 74px !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 10px !important;
        position: relative !important;
    }

    .brand-lockup {
        min-width: 0 !important;
        justify-self: start !important;
    }

    .site-header .brand-symbol {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
        object-fit: contain !important;
    }

    .site-header .wordmark-copy {
        min-width: 0 !important;
    }

    .site-header .wordmark-copy > span {
        font-size: 18px !important;
        white-space: nowrap !important;
    }

    .site-header .wordmark-copy small {
        margin-top: 4px !important;
        font-size: 7px !important;
        letter-spacing: .34em !important;
    }

    .mobile-header-languages {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .mobile-header-languages a {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.72) !important;
        color: var(--ink) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .mobile-header-languages a.active {
        border-color: var(--orange) !important;
        color: var(--orange) !important;
        background: rgba(217,107,43,.08) !important;
    }
    .menu-toggle {
        position: relative !important;
        z-index: 1305 !important;
        width: 46px !important;
        height: 46px !important;
        padding: 10px !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(23,23,23,.10) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.82) !important;
        justify-self: end !important;
        box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
        transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease !important;
    }

    .menu-toggle:hover,
    .menu-toggle:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 14px 30px rgba(0,0,0,.10) !important;
    }

    .menu-toggle span {
        position: absolute !important;
        top: 50% !important;
        width: 6px !important;
        height: 6px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: var(--ink) !important;
        transform: translateY(-50%) !important;
        transition: transform .26s cubic-bezier(.2,.8,.2,1), opacity .18s ease, width .26s ease, height .26s ease, left .26s ease, background-color .26s ease !important;
    }

    .menu-toggle span:nth-child(1) { left: 12px !important; }
    .menu-toggle span:nth-child(2) { left: 20px !important; }
    .menu-toggle span:nth-child(3) { left: 28px !important; }

    .menu-toggle[aria-expanded="true"] span:nth-child(1),
    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        width: 18px !important;
        height: 2px !important;
        left: 14px !important;
        border-radius: 999px !important;
        background: var(--orange) !important;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(-50%) rotate(45deg) !important;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0 !important;
        transform: translateY(-50%) scale(.2) !important;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-50%) rotate(-45deg) !important;
    }

    .site-header .header-actions {
        display: none !important;
    }

    /* Premium off-canvas drawer */
    .site-header .main-nav {
        position: fixed !important;
        z-index: 1300 !important;
        top: 86px !important;
        right: 12px !important;
        left: auto !important;
        width: min(368px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100dvh - 98px) !important;
        max-height: calc(100dvh - 98px) !important;
        padding: 24px 22px 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        overflow-y: auto !important;
        background: rgba(247,245,240,.98) !important;
        border: 1px solid rgba(23,23,23,.08) !important;
        border-radius: 26px 0 0 26px !important;
        box-shadow: -28px 0 72px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.10) !important;
        transform: translate3d(108%, 0, 0) !important;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease !important;
        visibility: visible !important;
        opacity: 0 !important;
    }

    [dir="rtl"] .site-header .main-nav {
        right: auto !important;
        left: 12px !important;
        border-left: 1px solid rgba(23,23,23,.08) !important;
        border-right: 1px solid rgba(23,23,23,.08) !important;
        border-radius: 0 26px 26px 0 !important;
        box-shadow: 28px 0 72px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.10) !important;
        transform: translate3d(-108%, 0, 0) !important;
    }

    .site-header .main-nav.open {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
    }

    .site-header .main-nav > a {
        width: 100% !important;
        padding: 15px 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid var(--line) !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    .site-header .main-nav > a::after {
        display: none !important;
    }

    .site-header .main-nav > a.active {
        color: var(--orange) !important;
    }

    .mobile-nav-inline-login {
        display: none !important;
    }

    .mobile-nav-footer {
        margin-top: 18px !important;
        padding-top: 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-top: 1px solid var(--line) !important;
    }

    .mobile-nav-login-compact {
        flex: 1 1 auto !important;
        min-height: 50px !important;
        display: inline-flex !important;
    }

    .mobile-public-theme-toggle {
        width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
        border: 1px solid var(--line) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.72) !important;
        color: var(--ink) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        flex: 0 0 50px !important;
    }

    .mobile-nav-backdrop {
        position: fixed !important;
        z-index: 1150 !important;
        inset: 0 !important;
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        background: rgba(9,9,9,.52) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity .22s ease, visibility .22s ease !important;
    }

    body.mobile-nav-open .mobile-nav-backdrop {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* More refined tablet grids */
    .category-grid,
    .product-grid,
    .product-grid-wide,
    .why-grid,
    .certificate-grid {
        gap: 18px !important;
    }

    .factory-grid,
    .export-grid,
    .two-col,
    .contact-grid,
    .product-detail-grid,
    .editorial-grid {
        gap: 38px !important;
    }
}

@media (max-width: 760px) {
    :root {
        --pad: 16px !important;
    }

    .site-header .container {
        width: calc(100% - 20px) !important;
    }

    .header-row {
        height: 68px !important;
        min-height: 68px !important;
    }

    .site-header .brand-symbol {
        width: 41px !important;
        height: 41px !important;
        flex-basis: 41px !important;
    }

    .site-header .wordmark-copy > span {
        font-size: 17px !important;
    }

    .site-header .wordmark-copy small {
        font-size: 6px !important;
        letter-spacing: .30em !important;
    }

    .mobile-header-languages {
        gap: 5px !important;
    }

    .mobile-header-languages a {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 7px !important;
        border-radius: 9px !important;
        font-size: 9.5px !important;
    }

    .menu-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .menu-toggle span:nth-child(1) { left: 10px !important; }
    .menu-toggle span:nth-child(2) { left: 18px !important; }
    .menu-toggle span:nth-child(3) { left: 26px !important; }

    .menu-toggle[aria-expanded="true"] span:nth-child(1),
    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        left: 12px !important;
    }

    .site-header .main-nav {
        top: 80px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100dvh - 90px) !important;
        max-height: calc(100dvh - 90px) !important;
        padding: 20px 18px 18px !important;
        border-radius: 22px 0 0 22px !important;
    }

    [dir="rtl"] .site-header .main-nav {
        left: 10px !important;
        border-radius: 0 22px 22px 0 !important;
    }

    /* Hero: premium, readable and not oversized */
    .hero {
        min-height: min(720px, calc(100svh - 68px)) !important;
        align-items: flex-end !important;
    }

    .hero-content {
        width: 100% !important;
        padding-top: 100px !important;
        padding-bottom: 42px !important;
    }

    .eyebrow {
        margin-bottom: 12px !important;
        font-size: 9px !important;
        letter-spacing: .16em !important;
    }

    .hero h1,
    .page-hero h1 {
        max-width: 100% !important;
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: 1 !important;
        letter-spacing: -.045em !important;
        overflow-wrap: anywhere;
    }

    .hero-copy,
    .page-hero p:last-child {
        max-width: 100% !important;
        margin-top: 18px !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .hero-actions {
        width: 100% !important;
        margin-top: 25px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    .visual-note {
        display: none !important;
    }

    /* Consistent mobile rhythm */
    .section {
        padding: 58px 0 !important;
    }

    .section-heading {
        max-width: 100% !important;
        margin-bottom: 28px !important;
    }

    .section-heading h2,
    .factory-copy h2,
    .two-col h2,
    .export-grid h2 {
        font-size: clamp(29px, 8.5vw, 40px) !important;
        line-height: 1.06 !important;
    }

    .section-heading p:not(.eyebrow),
    .factory-copy > p,
    .two-col p,
    .export-grid p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .split,
    .section-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .category-grid,
    .product-grid,
    .product-grid-wide,
    .factory-grid,
    .export-grid,
    .two-col,
    .contact-grid,
    .product-detail-grid,
    .editorial-grid,
    .footer-grid,
    .form-two,
    .certificate-grid {
        grid-template-columns: 1fr !important;
    }

    .category-grid,
    .product-grid,
    .product-grid-wide {
        gap: 24px !important;
    }

    .category-card {
        min-height: 320px !important;
        border-radius: 6px !important;
    }

    .category-caption {
        padding: 48px 20px 20px !important;
    }

    .product-card {
        min-width: 0 !important;
    }

    .product-card img {
        width: 100% !important;
        height: min(108vw, 470px) !important;
        padding: 10px !important;
        object-fit: contain !important;
    }

    .product-meta {
        margin-top: 13px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .product-card h3 {
        margin-top: 5px !important;
        font-size: 19px !important;
    }

    .factory-grid,
    .export-grid,
    .two-col,
    .contact-grid,
    .product-detail-grid {
        gap: 28px !important;
    }

    .factory-visual img,
    .content-image,
    .production-image img,
    .main-product-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .process-grid {
        grid-template-columns: 1fr !important;
        margin-top: 28px !important;
    }

    .process-item {
        min-height: 0 !important;
        padding: 20px 4px !important;
        border-right: 0 !important;
    }

    .process-item h3 {
        margin: 12px 0 0 !important;
    }

    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .why-line {
        margin-bottom: 18px !important;
    }

    .page-hero {
        padding: 78px 0 46px !important;
    }

    .product-detail {
        padding-top: 42px !important;
    }

    .main-product-image {
        min-height: 0 !important;
        padding: 12px !important;
    }

    .main-product-image img {
        height: auto !important;
        max-height: 520px !important;
    }

    .product-info {
        padding-top: 4px !important;
    }

    .product-info h1 {
        font-size: clamp(34px, 10vw, 50px) !important;
    }

    .lead {
        font-size: 16px !important;
    }

    .spec-table div {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 14px 0 !important;
    }

    .contact-page-hero {
        padding: 62px 0 42px !important;
    }

    .contact-hero-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .contact-hero-info,
    .contact-info-table,
    .contact-form {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .contact-form input,
    .contact-form textarea,
    input,
    textarea,
    select {
        max-width: 100% !important;
        font-size: 16px !important;
    }

    .map-frame,
    .map-frame iframe {
        width: 100% !important;
        min-width: 0 !important;
    }

    .map-frame {
        aspect-ratio: 4 / 3 !important;
        min-height: 300px !important;
    }

    .catalog-card {
        padding: 30px 22px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .catalog-card h2 {
        font-size: clamp(30px, 9vw, 44px) !important;
    }

    .site-footer {
        padding-top: 48px !important;
    }

    .footer-grid {
        gap: 26px !important;
        padding-bottom: 38px !important;
    }

    .footer-bottom {
        padding: 18px 0 24px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
}

@media (max-width: 420px) {
    :root {
        --pad: 13px !important;
    }

    .site-header .container {
        width: calc(100% - 14px) !important;
    }

    .site-header .brand-symbol {
        width: 37px !important;
        height: 37px !important;
        flex-basis: 37px !important;
    }

    .site-header .wordmark-copy > span {
        font-size: 15px !important;
    }

    .site-header .wordmark-copy small {
        margin-top: 2px !important;
        font-size: 5.5px !important;
    }

    .hero h1,
    .page-hero h1 {
        font-size: clamp(33px, 11vw, 46px) !important;
    }

    .product-card img {
        height: min(116vw, 430px) !important;
    }
}

@media (max-width: 420px) {
    .header-row {
        gap: 7px !important;
    }

    .mobile-header-languages {
        gap: 4px !important;
    }

    .mobile-header-languages a {
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        font-size: 9px !important;
    }

    .mobile-nav-inline-login {
        min-height: 46px !important;
    }
}

html[data-theme="dark"] .mobile-header-languages a,
html[data-theme="dark"] .mobile-public-theme-toggle {
    background: rgba(255,255,255,.04) !important;
    color: #f4f1eb !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .mobile-header-languages a.active {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    background: rgba(217,107,43,.12) !important;
}

@media (max-width: 420px) {
    .mobile-nav-footer {
        gap: 10px !important;
    }

    .mobile-nav-login-compact {
        min-height: 46px !important;
        padding-inline: 16px !important;
    }

    .mobile-public-theme-toggle {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        flex-basis: 46px !important;
    }
}

html[data-theme="dark"] .site-header .main-nav {
    background: rgba(16,16,16,.985) !important;
    border-color: rgba(255,255,255,.08) !important;
}