/**
 * Mobil & tablet — masaüstü stillerini bozmadan (min-width: 992px+ dokunulmaz)
 */

@media (max-width: 991px) {
    /* ---- Temel tipografi & dokunma alanı ---- */
    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 15px;
        line-height: 1.5;
        overflow-x: hidden;
    }

    /* ---- Üst navigasyon (hero / çerez / çekmece üstünde) ---- */
    .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 52px;
        margin: 0;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px 12px;
        border-radius: 0;
        /* backdrop-filter fixed çocukları navbar kutusuna hapseder — kullanma */
        background: linear-gradient(
            180deg,
            rgba(8, 12, 20, 0.96) 0%,
            rgba(10, 16, 26, 0.94) 100%
        );
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        z-index: 9600 !important;
        pointer-events: auto !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        box-sizing: border-box;
        overflow: visible;
    }

    body.nav-menu-open .top-nav,
    body:has(#menu-toggle:checked) .top-nav {
        z-index: 9650 !important;
    }

    .top-nav .menu {
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0;
    }

    .menu-button-container {
        margin-left: auto;
    }

    .language-selector,
    .containernew {
        flex-shrink: 0;
    }

    #languageSelect {
        max-width: 96px;
        font-size: 13px;
        padding: 8px 10px;
        min-height: 40px;
    }

    .top-nav.scrolled {
        background: rgba(8, 12, 20, 0.95);
    }

    /* display:none label ilişkisini kırar — görünmez ama DOM'da kalsın */
    #menu-toggle {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px);
        right: 12px;
        display: block !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        opacity: 0 !important;
        z-index: 9620 !important;
        cursor: pointer;
        pointer-events: auto !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .menu-button-container {
        display: flex !important;
        margin-top: 0 !important;
        order: 10;
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        z-index: 9625 !important;
        flex-shrink: 0;
        min-width: 52px;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-button,
    .menu-button::before,
    .menu-button::after {
        z-index: 1;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    body:has(#menu-toggle:checked) {
        overflow: hidden;
    }

    /* Üst menü — kapalıyken gizli */
    .top-nav > .menu,
    .top-nav > #topNavMenu,
    body > .menu,
    #topNavMenu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }

    body:has(#menu-toggle:checked) #topNavMenu,
    #menu-toggle:checked ~ #topNavMenu,
    body.nav-menu-open > .menu,
    body.nav-menu-open #topNavMenu,
    body.nav-menu-open .top-nav > #topNavMenu {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding:
            calc(var(--mobile-nav-h, 76px) + 8px + env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(24px, env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        list-style: none !important;
        background: #030508 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9580 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        box-sizing: border-box;
    }

    body.nav-menu-open::before {
        display: none !important;
    }

    body.nav-menu-open .menu-button-container {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .nav-menu-close-bar {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible;
    }

    .nav-menu-close {
        display: none;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: max(12px, env(safe-area-inset-right, 0px));
        z-index: 9640 !important;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0, 242, 255, 0.35);
        border-radius: 14px;
        background: rgba(8, 16, 26, 0.92);
        color: #fff;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.4),
            0 0 16px rgba(1, 177, 175, 0.2);
    }

    body.nav-menu-open .nav-menu-close {
        display: inline-flex !important;
    }

    body.nav-menu-open .menu > li:not(.nav-menu-close-bar),
    body.nav-menu-open #topNavMenu > li:not(.nav-menu-close-bar) {
        height: auto !important;
        min-height: 48px;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: block;
        width: 100%;
    }

    .menu > li {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .menu > li a,
    .menu .nav-link {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 12px 8px;
        font-size: 15px !important;
        font-weight: 500;
        color: #fff !important;
        width: 100%;
    }

    .menu .nav-item {
        width: 100%;
    }

    /* Arama — mobilde sade form */
    .menu .containernew {
        width: 100%;
        margin: 8px 0 16px;
    }

    .menu .containernew form {
        width: 100%;
    }

    /* .menu .mainbox — nav-controls.css */

    .menu .checkbox {
        display: none;
    }

    .menu .search_input {
        width: 100% !important;
        height: 100%;
        font-size: 16px;
        padding: 0 12px;
    }

    .menu .language-selector {
        margin: 8px 0;
    }

    .top-nav > a[href*="basket"] {
        order: 5;
        font-size: 14px;
        padding: 8px 10px;
        margin-right: 48px;
    }

    .basket-icon {
        margin-top: 0 !important;
    }

    /* ---- Sol kategori menüsü (çekmece) ---- */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.92);
        z-index: 1250;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .mobile-nav-overlay.is-visible {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Logo: mobile-topnav.css */

    .m-categories-fab {
        display: none !important;
    }

    /* Kategori çekmecesi — body altında, hover kurallarını geçersiz kıl */
    .side-nav {
        width: min(300px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 24px !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1260 !important;
        opacity: 0 !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        background:
            linear-gradient(
                180deg,
                rgba(48, 54, 64, 0.82) 0%,
                rgba(32, 38, 48, 0.88) 55%,
                rgba(24, 30, 40, 0.92) 100%
            ) !important;
        backdrop-filter: blur(24px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.65) !important;
        pointer-events: none;
        visibility: hidden;
    }

    .side-nav.is-open {
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto;
        visibility: visible;
        opacity: 1 !important;
    }

    .side-nav > *:not(.user) {
        display: none !important;
    }

    .side-nav.is-open > *:not(.user) {
        display: block !important;
        width: 100% !important;
    }

    .side-nav:hover:not(.is-open) {
        width: min(300px, 88vw) !important;
        height: 100dvh !important;
        transform: translate3d(-105%, 0, 0) !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .side-nav.is-open:hover {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Üst navbar logosu var — çekmecede tekrar marka gösterme */
    .side-nav .user {
        display: none !important;
    }

    .side-nav.is-open > ul:first-of-type {
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    }

    .side-nav .user .user-brand,
    .side-nav .user #user-img-link {
        border-radius: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px;
        cursor: pointer;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(1, 177, 175, 0.15);
        text-decoration: none !important;
    }

    .side-nav.is-open .user #user-img-link:active {
        background: rgba(1, 177, 175, 0.12) !important;
    }

    /* .side-nav .user-img — oval: sidebar-brand.css */

    .side-nav .user h1 {
        position: relative !important;
        left: auto !important;
        font-size: 16px !important;
    }

    .side-nav .user div {
        display: flex !important;
    }

    .side-nav ul {
        position: static !important;
        top: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px;
    }

    .side-nav > ul:first-of-type {
        flex: 1 1 auto;
        justify-content: flex-start !important;
        padding-top: 8px !important;
        overflow-y: auto;
    }

    .side-nav ul li {
        margin: 2px 0 !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        border-radius: 10px;
        width: 100%;
    }

    .side-nav .dropdown {
        display: block !important;
        width: 100% !important;
    }

    .side-nav .dropdown > a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 10px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .side-nav ul li:hover,
    .side-nav .dropdown > a:active {
        background: rgba(1, 177, 175, 0.12);
    }

    .side-nav.is-open ul li p,
    .side-nav.is-open > ul:last-of-type li p {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        top: auto !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-align: left !important;
        flex: 1 1 auto !important;
        color: #e8eef2 !important;
    }

    .side-nav ul li img {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        flex-shrink: 0;
        margin: 0 !important;
        position: static !important;
    }

    .side-nav .user-brand-text {
        display: block !important;
    }

    .side-nav .user-brand-text {
        position: relative;
        z-index: 1;
        font-size: 13px !important;
        letter-spacing: 0.08em;
        margin: 0 !important;
        text-align: left;
        flex: 1;
    }

    /* Alt kategori listesi: sidebar-dropdown.css */

    /* ---- İçerik alanı ---- */
    .containers {
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .page-content {
        padding: calc(64px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)) !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-content:has(.hero-slider) {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .products-page {
        padding-top: 0 !important;
        padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .header {
        position: static;
        height: 0;
        overflow: visible;
    }

    /* Ana sayfa slider: home-layout.css */

    /* Hero: mobile-home.css */

    /* ---- Hizmet / ürün kartları ---- */
    .service-wrapper,
    .service-wrapper3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px !important;
        margin-top: 0 !important;
    }

    .service-wrapper1,
    .service-wrapper2 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* Ürün grid: products-list.css */

    .page-content-wrapper {
        padding: 72px 16px 32px !important;
        max-width: 100%;
    }

    .service-wrapper3 .card-product-media {
        height: 200px;
    }

    .service .cards {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 8px !important;
    }

    .service .solution-card {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .service .solution-card--wide {
        min-height: 0;
    }

    .service .solution-card__inner {
        transform: none !important;
    }

    .service h1,
    .solutions-title {
        font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
        margin-bottom: 1.5rem !important;
    }

    .solutions-header {
        margin-bottom: 1.75rem !important;
    }

    .solutions-eyebrow {
        font-size: 0.65rem;
    }

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

    .solution-feature,
    .software-wide .sw-flex {
        flex-direction: column;
        gap: 16px;
    }

    .software-wide .sw-left {
        max-width: 100%;
    }

    /* ---- Footer (site-footer: footer-enhance.css) ---- */
    .site-footer-wrap {
        padding: 0 !important;
        width: 100% !important;
    }

    /* ---- Çerez bildirimi ---- */
    #cookie-popup.cookie-consent-container {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .cookie-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-buttons .cookie-btn {
        width: 100%;
        min-height: 44px;
    }

    /* ---- Sayfa başlıkları ---- */
    .page-content > h1,
    .page-content > h2,
    .page-content-wrapper > h1 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 0 0.75rem;
        padding: 0;
        font-size: clamp(1.35rem, 5vw, 1.75rem);
        font-weight: 600;
        line-height: 1.25;
        color: #fff;
        letter-spacing: 0.02em;
    }

    .page-content > h2 {
        font-size: clamp(1rem, 4vw, 1.2rem);
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 1.25rem;
    }

    /* Ürün kartları: products-list.css (parlayan buton + kompakt kart) */

    /* ---- Sayfalama (330vh hatalarını düzelt) ---- */
    .pagination {
        position: relative !important;
        margin-top: 1.5rem !important;
        margin-bottom: 2rem !important;
        flex-wrap: wrap;
        padding: 0 8px;
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    .pagination .step-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .pagination .step-links a,
    .pagination .step-links .current {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        font-size: 14px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff !important;
        background: rgba(255, 255, 255, 0.06);
    }

    .pagination .step-links .current {
        background: rgba(1, 177, 175, 0.35);
        border-color: rgba(1, 177, 175, 0.6);
    }

    /* ---- Ürün detay ---- */
    .service-wrapper3 h1 {
        position: static !important;
        top: auto !important;
        margin: 0 0 1rem;
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .product-detail {
        margin-top: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.25rem;
    }

    .product-image-container,
    .product-info {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 320px;
        object-fit: contain;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.25);
    }

    .product-info .button2,
    #add-to-basket-button {
        width: 100%;
        min-height: 44px;
    }

    /* ---- Sepet ---- */
    .service-wrapper3 .row {
        flex-direction: column !important;
        align-items: stretch !important;
        left: auto !important;
        margin: 0;
        gap: 1rem;
    }

    .product-item {
        max-width: 100% !important;
        width: 100%;
        padding: 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .product-item img {
        max-width: 100%;
        height: auto;
        max-height: 220px;
    }

    .text-center button,
    .button-63 {
        width: 100% !important;
        min-height: 48px;
        margin-top: 1rem !important;
        border-radius: 12px;
        font-size: 15px;
    }

    /* ---- İletişim / formlar ---- */
    .wrapper2,
    .wrapper4 {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 1rem 0;
        padding: 1.25rem !important;
    }

    input,
    select,
    textarea,
    .form-control {
        font-size: 16px;
        min-height: 44px;
    }

    /* ---- Genel yardımcılar ---- */

    img {
        max-width: 100%;
        height: auto;
    }

    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ortaklar başlığı — mobilde şeffaf gradient metin okunmuyor */
    .middle8 h2 {
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        -webkit-text-stroke-width: 0 !important;
        font-size: clamp(1.15rem, 5vw, 1.5rem) !important;
        letter-spacing: 0.06em !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
    }

    /* Ana sayfa akışı: home-layout.css */
}

@media (max-width: 576px) {
    /* page-content üst boşluk: mobile-navbar.css + responsive.css */
    .page-content:has(.hero-slider) {
        padding: 0 0 24px !important;
    }

    /* Logo boyutu: mobile-navbar.css */
}

/* Mobil menü öğeleri — masaüstünde gizli */
@media (min-width: 992px) {
    .m-menu-logo,
    .m-categories-fab,
    .top-nav__brand,
    .mobile-nav-overlay {
        display: none !important;
    }

    body > .side-nav {
        position: fixed;
        top: 0;
        left: 0;
    }
}