/* ========== CSS RESET & BASE ========== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: 100%;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            font-size: 15px;
            line-height: 1.6;
            color: #1d1d1f;
            background: #ffffff;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover,
        a:focus,
        a:active {
            text-decoration: none;
        }

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

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        button {
            font-family: inherit;
            cursor: pointer;
            border: none;
        }

        /* ========== DESIGN TOKENS ========== */
        :root {
            --color-primary: #000000;
            --color-primary-hover: #1a1a1a;
            --color-accent: #0071e3;
            --color-accent-hover: #0077ed;
            --color-success: #34c759;
            --color-danger: #ff3b30;
            --color-warning: #ff9500;

            --color-white: #ffffff;
            --color-gray-50: #fafafa;
            --color-gray-100: #f5f5f7;
            --color-gray-200: #e8e8ed;
            --color-gray-300: #d2d2d7;
            --color-gray-400: #86868b;
            --color-gray-500: #6e6e73;
            --color-gray-600: #424245;
            --color-gray-900: #1d1d1f;

            --radius-sm: 8px;
            --radius: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
            --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

            --transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
            --transition-fast: all 0.2s ease;
        }

        /* header.ultra-modern-header > .container ile aynı ölçü (anasayfa section’lar hizalı) */
        .container {
            max-width: 1320px;
            width: 100%;
            margin: 0 auto;
            padding: 0 12px;
            box-sizing: border-box;
        }

        @media (min-width: 1600px) {
            .container {
                max-width: 1520px;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 12px !important;
                width: 100%;
                max-width: none;
            }
        }

        /* ========== ULTRA MODERN TWO-ROW HEADER ========== */
        .ultra-modern-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid var(--color-gray-200);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
            overflow: visible;
        }

        .header-row-1 {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 32px;
            padding: 18px 0;
        }

        .header-left .brand-logo img {
            height: 45px;
            width: auto;
            transition: transform 0.3s ease;
        }

        .header-left .brand-logo:hover img {
            transform: scale(1.05);
        }

        .header-center {
            max-width: 600px;
            width: 100%;
            justify-self: center;
        }

        .unified-search {
            width: 100%;
        }

        .search-container {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--color-gray-100);
            border-radius: 50px;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            width: 100%;
            /* FIX: Search container takes full width of parent center div */
        }

        .search-container:focus-within {
            background: var(--color-white);
            border-color: var(--color-accent);
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
        }

        .search-icon {
            color: var(--color-gray-500);
            font-size: 18px;
            margin-left: 20px;
            transition: color 0.3s ease;
        }

        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 16px 20px;
            font-size: 16px;
            outline: none;
            color: var(--color-gray-900);
        }

        .search-submit {
            background: var(--color-accent);
            color: white;
            border: none;
            border-radius: 50px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .search-submit:hover {
            background: var(--color-accent-hover);
            transform: scale(1.05);
        }

        .header-right {
            justify-self: end;
        }

        .user-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
            color: var(--color-gray-700);
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
            border-radius: 12px;
            position: relative;
        }

        .action-btn:hover {
            color: var(--color-accent);
            background: var(--color-gray-100);
        }

        .action-btn i {
            font-size: 20px;
            margin-bottom: 2px;
        }

        .cart-count {
            position: absolute;
            top: -2px;
            right: -2px;
            background: var(--color-danger);
            color: white;
            font-size: 10px;
            font-weight: 700;
            border-radius: 50%;
            min-width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--color-gray-700);
            cursor: pointer;
            padding: 8px;
            /* Animation props */
            transition: all 0.3s ease;
        }

        /* Mobile Menu Toggle Animation State */
        .mobile-menu-toggle.active i {
            transform: rotate(90deg);
            color: var(--color-accent);
        }

        .header-row-2 {
            border-top: 1px solid var(--color-gray-200);
            background: linear-gradient(135deg, var(--color-gray-50) 0%, rgba(0, 113, 227, 0.02) 100%);
            padding: 0;
            overflow: visible;
            position: relative;
            z-index: 999;
        }

        .category-navigation {
            overflow: visible;
            scrollbar-width: none;
        }

        .category-navigation::-webkit-scrollbar {
            display: none;
        }

        .category-menu {
            display: flex;
            align-items: center;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 4px;
            position: relative;
            overflow: visible;
        }

        .category-item {
            position: relative;
        }

        .category-link {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px 20px;
            color: var(--color-gray-700);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .category-link:hover {
            color: var(--color-accent);
            background: rgba(0, 113, 227, 0.08);
        }

        .category-link i:first-child {
            font-size: 16px;
            opacity: 0.8;
        }

        .expand-icon {
            font-size: 12px;
            transition: transform 0.3s ease;
            opacity: 0.6;
        }

        .category-item.active .expand-icon,
        .category-item:hover .expand-icon {
            transform: rotate(180deg);
        }

        .category-submenu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: white;
            border-radius: 16px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
            border: 1px solid var(--color-gray-200);
            padding: 24px;
            min-width: 600px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 99999;
            margin-top: 0;
        }

        .category-item:hover .category-submenu,
        .category-submenu:hover {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .category-item:hover {
            position: relative;
            z-index: 100000;
        }

        /* Prevent body scroll when dropdown is open */
        .category-menu:hover {
            overflow: visible;
        }

        .header-row-2:hover {
            overflow: visible;
            z-index: 100000;
        }

        body:has(.category-item:hover) {
            overflow-x: visible;
        }

        /* Improve dropdown stability */
        .category-item {
            transition: all 0.2s ease;
        }

        .category-submenu {
            pointer-events: none;
            transition: all 0.3s ease 0.1s;
        }

        .category-item:hover .category-submenu,
        .category-submenu:hover {
            pointer-events: all;
            transition-delay: 0s;
        }

        .submenu-content {
            width: 100%;
        }

        .submenu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .submenu-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .submenu-link {
            color: var(--color-gray-600);
            font-size: 13px;
            font-weight: 500;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .submenu-link:hover {
            color: var(--color-accent);
            background: var(--color-gray-100);
            transform: translateX(4px);
        }

        /* Mobile Header Responsive */
        @media (max-width: 768px) {
            .header-row-1 {
                grid-template-columns: 120px minmax(180px, 1fr) 50px;
                gap: 10px;
                padding: 12px 0;
            }

            .header-left .brand-logo img {
                height: 35px;
                width: 110px;
                object-fit: contain;
            }

            .header-center {
                max-width: 220px;
                justify-self: center;
            }

            .search-container {
                border-radius: 20px;
                height: 40px;
                width: 100%;
                max-width: 200px;
            }

            .search-input {
                padding: 8px 12px;
                font-size: 13px;
            }

            .search-icon {
                margin-left: 12px;
                font-size: 14px;
            }

            .search-submit {
                width: 35px;
                height: 35px;
                margin-right: 3px;
            }

            .action-btn {
                padding: 6px 8px;
                font-size: 11px;
            }

            .action-btn i {
                font-size: 18px;
            }

            /* Sepet rozeti .cart-count span — gizlenmemeli (aksi halde miktar kaybolur) */
            .action-btn span:not(.cart-count):not(.mobile-cart-badge) {
                display: none;
            }

            .header-right .user-actions > a.cart-action {
                display: inline-flex !important;
            }

            .mobile-menu-toggle {
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 45px;
                height: 45px;
                background: var(--color-gray-100);
                border-radius: 12px;
                font-size: 20px;
                color: var(--color-gray-700);
            }

            .header-row-2 {
                display: none;
            }

            .hidden-mobile {
                display: none;
            }

            .user-actions {
                justify-content: flex-end;
            }
        }

        .nav-list {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 16px;
            font-weight: 600;
            font-size: 14px;
            color: var(--color-gray-700);
            text-decoration: none;
            border-radius: var(--radius-lg);
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .nav-link:hover {
            background: var(--color-white);
            color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .nav-link i {
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .nav-item:hover .nav-link i {
            transform: rotate(180deg);
        }

        .logo {
            flex-shrink: 0;
        }

        .logo img {
            height: 36px;
            transition: var(--transition-fast);
        }

        .logo:hover img {
            opacity: 0.8;
        }

        .search-box {
            flex: 1;
            max-width: 500px;
            position: relative;
        }

        .search-input-group {
            position: relative;
            display: flex;
        }

        .search-input-group input {
            width: 100%;
            padding: 14px 50px 14px 20px;
            border: 2px solid var(--color-gray-200);
            background: var(--color-white);
            border-radius: 25px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-900);
            transition: var(--transition-fast);
            outline: none;
        }

        .search-input-group input:focus {
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
        }

        .search-input-group .search-icon {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--color-primary);
            color: var(--color-white);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-input-group .search-icon:hover {
            background: var(--color-primary-dark);
            transform: translateY(-50%) scale(1.05);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: var(--color-gray-50);
            color: var(--color-gray-600);
            border-radius: 50%;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 16px;
            border: 2px solid transparent;
        }

        .header-btn:hover {
            background: var(--color-primary);
            color: var(--color-white);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
        }

        .cart-btn {
            background: var(--color-primary);
            color: var(--color-white);
            position: relative;
        }

        .cart-btn:hover {
            background: var(--color-primary-dark);
            transform: translateY(-2px) scale(1.05);
        }

        .mobile-hamburger {
            background: none;
            border: none;
            padding: 12px;
            cursor: pointer;
            font-size: 18px;
            color: var(--color-gray-600);
            transition: var(--transition-fast);
        }

        .mobile-hamburger:hover {
            color: var(--color-primary);
        }

        /* Mobile Hamburger Menu */
        .mobile-hamburger {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--color-gray-600);
            cursor: pointer;
            padding: 10px;
            border-radius: 6px;
            transition: var(--transition-fast);
        }

        .mobile-hamburger:hover {
            background: var(--color-gray-100);
            color: var(--color-primary);
        }

        @media (max-width: 768px) {
            .mobile-hamburger {
                display: block;
            }
        }

        /* Mobile Sidebar Menu */
        .mobile-sidebar {
            position: fixed;
            top: 0;
            left: -100%;
            width: 300px;
            height: 100vh;
            background: var(--color-white);
            box-shadow: var(--shadow-xl);
            z-index: 1002;
            transition: left 0.3s ease;
            overflow-y: auto;
            scrollbar-width: none;
        }

        .mobile-sidebar::-webkit-scrollbar {
            display: none;
        }

        .mobile-sidebar.open {
            left: 0;
        }

        .mobile-sidebar-header {
            padding: 20px;
            border-bottom: 1px solid var(--color-gray-200);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mobile-sidebar-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--color-gray-600);
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            transition: var(--transition-fast);
        }

        .mobile-sidebar-close:hover {
            background: var(--color-gray-100);
            color: var(--color-primary);
        }

        .mobile-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-menu-item {
            border-bottom: 1px solid var(--color-gray-100);
        }

        .mobile-menu-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            color: var(--color-gray-900);
            font-weight: 500;
            transition: var(--transition-fast);
        }

        button.mobile-menu-link {
            width: 100%;
            border: none;
            background: none;
            font: inherit;
            text-align: left;
            cursor: pointer;
            box-sizing: border-box;
        }

        .mobile-menu-link:hover {
            background: var(--color-gray-50);
            color: var(--color-accent);
        }

        .mobile-submenu {
            list-style: none;
            padding: 0;
            margin: 0;
            background: var(--color-gray-50);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .mobile-submenu.open {
            max-height: 500px;
        }

        .mobile-submenu-link {
            display: block;
            padding: 12px 40px;
            color: var(--color-gray-600);
            font-size: 14px;
            transition: var(--transition-fast);
        }

        .mobile-submenu-link:hover {
            background: var(--color-gray-100);
            color: var(--color-accent);
            padding-left: 45px;
        }

        /* Mobile Overlay */
        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }

        .mobile-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .header-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: var(--color-gray-600);
            background: transparent;
            transition: var(--transition-fast);
            position: relative;
        }

        .header-btn:hover {
            background: var(--color-gray-100);
            color: var(--color-primary);
        }

        .cart-btn {
            background: var(--color-primary);
            color: var(--color-white) !important;
        }

        .cart-btn:hover {
            background: var(--color-primary-hover);
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .hidden-mobile {
                display: none !important;
            }

            .header-top {
                padding: 12px 0;
                gap: 16px;
            }

            .logo img {
                height: 32px;
            }

            .search-box {
                display: none !important;
            }

            .header-btn {
                width: 40px;
                height: 40px;
            }

            .main-navigation {
                display: none !important;
            }

            .mobile-hamburger {
                display: flex !important;
            }
        }

        /* ========== MEGA MENU NAVIGATION ========== */
        .mega-nav {
            background: var(--color-white);
            border-bottom: 1px solid var(--color-gray-200);
            position: relative;
            z-index: 10000;
        }

        /* Sticky Menu */
        .sticky-menu {
            position: sticky;
            top: 0;
            z-index: 9998;
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }

        .mega-nav-list {
            display: flex;
            gap: 4px;
            padding: 0;
            margin: 0;
            list-style: none;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .mega-nav-list::-webkit-scrollbar {
            display: none;
        }

        .mega-nav-item {
            position: relative;
        }

        .mega-nav-link {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            color: var(--color-gray-600);
            border-radius: 18px;
            transition: var(--transition-fast);
            white-space: nowrap;
        }

        .mega-nav-link:hover,
        .mega-nav-item:hover .mega-nav-link {
            background: var(--color-gray-100);
            color: var(--color-primary);
        }

        .mega-nav-link i {
            font-size: 10px;
            transition: var(--transition-fast);
        }

        .mega-nav-item:hover .mega-nav-link i {
            transform: rotate(180deg);
        }

        /* ========== MODERN MEGA DROPDOWN SYSTEM ========== */
        .mega-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            width: 95vw;
            max-width: 1200px;
            background: var(--color-white);
            border: none;
            border-radius: var(--radius-xl);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            margin-top: 16px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 100000;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .nav-item:hover .mega-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .mega-dropdown-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 20px;
            min-height: 200px;
            max-height: 300px;
            overflow-y: auto;
        }

        /* Featured Categories Section */
        .mega-featured {
            background: linear-gradient(135deg, var(--color-gray-50) 0%, rgba(0, 113, 227, 0.05) 100%);
            padding: 24px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-gray-100);
        }

        .mega-featured h4 {
            font-size: 16px;
            font-weight: 800;
            color: var(--color-gray-900);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--color-accent);
        }

        .featured-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .featured-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            font-size: 14px;
            font-weight: 600;
            color: var(--color-gray-700);
            background: var(--color-white);
            border: 2px solid var(--color-gray-100);
            border-radius: var(--radius);
            transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .featured-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .featured-link:hover {
            background: var(--color-accent);
            color: var(--color-white);
            border-color: var(--color-accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 113, 227, 0.3);
        }

        .featured-link:hover::before {
            left: 100%;
        }

        .featured-link.main-cat {
            background: linear-gradient(135deg, var(--color-accent) 0%, #0059b3 100%);
            color: var(--color-white);
            border-color: var(--color-accent);
            margin-top: 12px;
            box-shadow: 0 4px 15px rgba(0, 113, 227, 0.2);
        }

        .featured-link.main-cat:hover {
            background: linear-gradient(135deg, #0059b3 0%, var(--color-accent) 100%);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 113, 227, 0.4);
        }

        .featured-link i {
            font-size: 13px;
            opacity: 0.9;
            transition: transform 0.3s ease;
        }

        .featured-link:hover i {
            transform: scale(1.1);
        }

        /* Categories Section */
        .mega-categories {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .mega-categories h4 {
            font-size: 18px;
            font-weight: 800;
            color: var(--color-gray-900);
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 3px solid var(--color-accent);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .mega-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            height: 100%;
            align-content: start;
        }

        .mega-col {
            background: var(--color-white);
            padding: 20px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-gray-100);
            transition: all 0.3s ease;
            height: fit-content;
        }

        .mega-col:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
            border-color: var(--color-gray-200);
        }

        .mega-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mega-col ul li {
            margin-bottom: 8px;
        }

        .mega-cat-link {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-700);
            border-radius: var(--radius);
            transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
            text-decoration: none;
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .mega-cat-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .mega-cat-link:hover {
            background: linear-gradient(135deg, var(--color-accent), #0059b3);
            color: var(--color-white);
            border-color: var(--color-accent);
            transform: translateX(4px);
            box-shadow: 0 4px 15px rgba(0, 113, 227, 0.2);
        }

        .mega-cat-link:hover::before {
            left: 100%;
        }

        .mega-cat-link i {
            font-size: 10px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .mega-cat-link:hover i {
            opacity: 1;
            transform: translateX(2px) scale(1.1);
        }

        /* Sub-subcategories */
        .mega-sub-list {
            list-style: none;
            padding: 4px 0 8px 20px;
            margin: 0;
        }

        .mega-sub-list li {
            margin-bottom: 2px;
        }

        .mega-sub-list a {
            display: block;
            padding: 4px 8px;
            font-size: 12px;
            color: var(--color-gray-500);
            border-radius: 4px;
            transition: var(--transition-fast);
            text-decoration: none;
        }

        .mega-sub-list a:hover {
            background: var(--color-gray-100);
            color: var(--color-accent);
            padding-left: 12px;
        }

        /* ========== RESPONSIVE DROPDOWN BEHAVIOR ========== */
        @media (max-width: 1024px) {
            .mega-dropdown {
                display: none !important;
            }
        }

        @media (min-width: 1025px) {

            /* Enhanced dropdown behavior for desktop */
            .mega-nav-item {
                position: static;
            }

            .mega-dropdown {
                position: absolute;
                display: block;
                top: 100%;
                /* Fix disappearing issue: Remove margin that causes gap */
                margin-top: 0;
                padding-top: 15px;
                /* Use padding for visual spacing */
            }

            /* HOVER BRIDGE: Invisible area to keep menu open while moving mouse */
            .mega-dropdown::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 20px;
                /* Covers the padding area */
                background: transparent;
            }

            .mega-nav-item:hover .mega-dropdown {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(0);
            }

            /* Enhanced hover states */
            .mega-dropdown:hover {
                opacity: 1;
                visibility: visible;
                transform: translateX(-50%) translateY(0);
            }

            /* Maintain dropdown on navigation */
            .mega-nav-item:hover {
                z-index: 100001;
            }

            .mega-dropdown {
                z-index: 100000;
            }

            /* Smooth transitions */
            .mega-nav-item {
                transition: z-index 0.1s ease;
            }

            /* Modern Grid Layout Remake - MEGA MENU */
            .mega-dropdown-container {
                display: grid;
                grid-template-columns: 280px 1fr;
                gap: 0;
                padding: 0;
                min-height: 450px;
                max-height: 650px;
                background: #fff;
                border-radius: 16px;
                overflow: hidden;
            }

            .mega-featured {
                background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
                padding: 32px;
                border-right: 1px solid var(--color-gray-200);
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .mega-featured h4 {
                font-size: 15px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--color-gray-500);
                border-bottom: none;
                margin-bottom: 0;
            }

            /* Featured Promo Card inside Menu */
            .menu-promo-card {
                background: linear-gradient(135deg, var(--color-accent) 0%, #004ecc 100%);
                border-radius: 12px;
                padding: 24px;
                color: white;
                margin-top: auto;
                box-shadow: 0 10px 30px rgba(0, 113, 227, 0.2);
            }

            .menu-promo-card h3 {
                font-size: 18px;
                margin-bottom: 8px;
                font-weight: 700;
            }

            .menu-promo-card p {
                font-size: 13px;
                margin-bottom: 16px;
                opacity: 0.9;
            }

            .menu-promo-btn {
                display: inline-block;
                padding: 8px 16px;
                background: white;
                color: var(--color-accent);
                border-radius: 20px;
                font-size: 12px;
                font-weight: 600;
                text-decoration: none;
            }

            .mega-categories {
                padding: 32px;
                background: #ffffff;
            }

            .mega-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 32px;
                align-content: start;
            }

            /* Clean List Style for Mega Menu Types */
            .mega-col {
                background: transparent;
                padding: 0;
                border: none;
                box-shadow: none;
            }

            .mega-col:hover {
                transform: none;
                box-shadow: none;
            }

            .mega-col h4 {
                font-size: 14px;
                font-weight: 700;
                color: var(--color-gray-900);
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid var(--color-gray-200);
                display: block;
                /* Ensure full width line */
            }

            .mega-col ul li {
                margin-bottom: 6px;
            }

            .mega-col ul li a {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 6px 0;
                font-size: 14px;
                color: var(--color-gray-600);
                text-decoration: none;
                transition: all 0.2s ease;
            }

            .mega-col ul li a:hover {
                color: var(--color-accent);
                transform: translateX(4px);
            }

            /* Add chevron on hover */
            .mega-col ul li a::after {
                content: '\f054';
                /* FontAwesome chevron-right */
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 10px;
                opacity: 0;
                transform: translateX(-5px);
                transition: all 0.2s ease;
            }

            .mega-col ul li a:hover::after {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* ========== HIGH Z-INDEX OVERRIDE FOR DROPDOWNS ========== */
        .mega-nav {
            z-index: 99998;
            position: relative;
        }

        .mega-nav-item.active {
            z-index: 100002;
        }

        /* ========== MOBILE SEARCH ========== */
        .mobile-search {
            display: none;
            padding: 12px 16px;
            background: var(--color-white);
            border-bottom: 1px solid var(--color-gray-200);
        }

        .mobile-search form {
            display: flex;
            gap: 8px;
        }

        .mobile-search input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid var(--color-gray-200);
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
            outline: none;
        }

        .mobile-search input:focus {
            border-color: var(--color-accent);
        }

        .mobile-search button {
            padding: 12px 20px;
            background: var(--color-primary);
            color: var(--color-white);
            border-radius: 10px;
            font-weight: 600;
        }

        /* Mobile search hidden - using header search only */
        .mobile-search {
            display: none !important;
        }


        /* ========== CATEGORY STORIES (MIXED: MAIN + SUB) ========== */
        .category-stories {
            padding: 12px 0;
            background: var(--color-white);
            border-bottom: 1px solid var(--color-gray-200);
            position: relative;
            z-index: 0;
        }

        .stories-scroll {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 6px;
        }

        .stories-scroll::-webkit-scrollbar {
            display: none;
        }

        .story-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 80px;
            max-width: 80px;
            cursor: pointer;
            flex-shrink: 0;
            transition: var(--transition);
            position: relative;
        }


        .story-item:active {
            transform: scale(0.95);
        }

        .story-ring {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            padding: 3px;
            transition: var(--transition);
        }

        .story-ring:hover {
            transform: scale(1.06);
        }

        .story-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid var(--color-white);
            background: var(--color-gray-100);
            object-fit: cover;
        }

        .story-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--color-gray-600);
            text-align: center;
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.3;
        }

        @media (max-width: 768px) {
            .category-stories {
                padding: 12px 0;
            }

            .stories-scroll {
                gap: 12px;
            }

            .story-item {
                min-width: 72px;
                max-width: 72px;
                gap: 6px;
            }

            .story-ring {
                width: 64px;
                height: 64px;
            }

            .story-label {
                font-size: 10px;
                width: 72px;
            }
        }

        /* ========== SECTIONS ========== */
        .section {
            padding: 24px 0;
        }

        .section.bg-light {
            background: var(--color-gray-50);
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: var(--color-gray-900);
        }

        .section-link {
            font-size: 13px;
            font-weight: 600;
            color: var(--color-accent);
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 6px 14px;
            border-radius: 16px;
            transition: var(--transition-fast);
        }

        .section-link:hover {
            background: rgba(0, 113, 227, 0.1);
            gap: 6px;
        }

        /* Reduce spacing for product sections */
        .section:has(.section-title:contains("Flaş Ürünler")),
        .section:has(.section-title:contains("Yeni Gelen")),
        .flash-products-section,
        .new-products-section {
            padding-top: 16px !important;
        }

        @media (max-width: 768px) {
            .section {
                padding: 20px 0;
            }

            .section-header {
                margin-bottom: 16px;
            }

            .section-title {
                font-size: 20px;
            }

            .section-link {
                font-size: 12px;
                padding: 5px 12px;
            }

            .section:has(.section-title:contains("Flaş Ürünler")),
            .section:has(.section-title:contains("Yeni Gelen")),
            .flash-products-section,
            .new-products-section {
                padding-top: 12px !important;
            }
        }

        /* ========== CATEGORY CARDS ========== */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 12px;
            padding: 20px 0;
        }

        .cat-card {
            background: var(--color-white);
            border-radius: var(--radius);
            padding: 16px 12px;
            text-align: center;
            border: 1px solid var(--color-gray-200);
            transition: var(--transition);
        }

        /* Modern Category Card - Image Only Design */
        .modern-cat-card {
            background: transparent;
            border: none;
            padding: 0;
            position: relative;
            overflow: hidden;
        }

        .cat-image-wrapper {
            position: relative;
            width: 100%;
            height: 120px;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--color-gray-100);
        }

        .modern-cat-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .cat-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), transparent);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

        .cat-hover-text {
            color: white;
            font-weight: 600;
            font-size: 14px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .modern-cat-card:hover .cat-overlay {
            opacity: 1;
        }

        .modern-cat-card:hover img {
            transform: scale(1.05);
        }

        .modern-cat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .cat-card h3 {
            font-size: 12px;
            font-weight: 600;
            color: var(--color-gray-900);
            margin-bottom: 2px;
        }

        .cat-card p {
            font-size: 10px;
            color: var(--color-gray-400);
        }

        @media (max-width: 992px) {
            .category-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .category-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                padding: 16px 0;
            }

            .cat-card {
                padding: 12px 8px;
            }

            .cat-card img {
                height: 52px;
            }

            .cat-image-wrapper {
                height: 90px;
            }
        }

        /* ========== MODERN HORIZONTAL CAROUSEL SYSTEM ========== */
        .carousel-container {
            position: relative;
            overflow: hidden;
            margin: 0 -8px;
        }

        .carousel-wrapper {
            position: relative;
            overflow: hidden;
        }

        .product-carousel {
            display: flex !important;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            gap: 16px;
            padding: 10px 8px;
            will-change: transform;
        }

        .product-carousel .ps-product-item {
            flex: 0 0 auto;
            width: 200px;
            max-width: 200px;
            scroll-snap-align: start;
        }

        /* Modern scrollbars for better UX */
        .product-carousel {
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
            scroll-snap-type: x mandatory;
        }

        .product-carousel::-webkit-scrollbar {
            height: 6px;
        }

        .product-carousel::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 3px;
            margin: 0 20px;
        }

        .product-carousel::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            transition: background 0.3s ease;
        }

        .product-carousel::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.4);
        }

        /* Navigation arrows */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            opacity: 0;
            visibility: hidden;
        }

        .carousel-container:hover .carousel-nav {
            opacity: 1;
            visibility: visible;
        }

        .carousel-nav {
            opacity: 0.9 !important;
            visibility: visible !important;
            z-index: 15 !important;
        }

        .carousel-nav:hover {
            background: var(--color-primary);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }

        .carousel-nav.prev {
            left: 10px;
        }

        .carousel-nav.next {
            right: 10px;
        }

        .carousel-nav i {
            font-size: 16px;
        }

        /* Responsive adjustments */
        @media (max-width: 1200px) {
            .product-carousel .ps-product-item {
                width: 180px;
                max-width: 180px;
            }
        }

        @media (max-width: 768px) {
            .product-carousel .ps-product-item {
                width: 160px;
                max-width: 160px;
            }

            .carousel-nav {
                width: 36px;
                height: 36px;
            }

            .carousel-nav i {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .product-carousel .ps-product-item {
                width: 140px;
                max-width: 140px;
            }

            .product-carousel {
                gap: 12px;
                padding: 10px 4px;
            }
        }

        /* ========== IMAGE LOADING SYSTEM ========== */
        .img-container {
            position: relative;
            overflow: hidden;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .img-container::before {
            content: 'Resim Yükleniyor';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 9px;
            font-weight: 500;
            color: rgba(100, 116, 139, 0.82);
            z-index: 1;
            text-align: center;
            line-height: 1.25;
            max-width: min(92%, 8rem);
            white-space: nowrap;
            pointer-events: none;
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .img-container.loaded::before,
        .img-container.img-error::before {
            content: none !important;
            display: none !important;
            opacity: 0 !important;
        }

        .img-container img {
            position: relative;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .img-container.loaded img {
            opacity: 1;
        }

        .img-container.loaded {
            background: transparent;
            animation: none;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* Metin yer tutucu kaldırıldı — temp.php .img-container.img-error ile SVG/nötr arka plan */
        .img-error {
            background: #f8f8f8;
            display: block;
            color: #999;
            font-size: 11px;
            text-align: center;
        }

        .img-error::before {
            content: none !important;
            display: none !important;
        }

        /* ========== OWL CAROUSEL CUSTOMIZATION ========== */
        /* Fallback for when JS is loading or fails */
        .product-carousel:not(.owl-loaded) {
            display: flex !important;
            overflow-x: auto !important;
            gap: 10px;
            padding-bottom: 20px;
            /* Space for scrollbar */
        }

        .product-carousel:not(.owl-loaded)>li {
            flex: 0 0 165px;
            min-width: 165px;
        }

        .product-carousel.owl-carousel .owl-stage-outer {
            padding: 10px 0;
            overflow: hidden;
        }

        .product-carousel.owl-carousel .owl-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            pointer-events: none;
            margin-top: 0;
        }

        /* ========== MODERN NATIVE SCROLL (APPLE STYLE) ========== */
        .modern-scroll-container {
            position: relative;
            width: 100%;
            padding: 0 10px;
            /* Slight buffer for arrows */
        }

        .modern-scroll-wrapper {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            /* iOS Momentum */
            padding-bottom: 20px;
            margin-bottom: -20px;
            /* Hide scrollbar visual */
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
            list-style: none !important;
            padding-left: 0;
            margin-left: 0;
        }

        .modern-scroll-wrapper::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        .modern-scroll-wrapper>li {
            flex: 0 0 180px;
            /* Fixed width for consistency */
            width: 180px;
            min-width: 180px;
            scroll-snap-align: start;
            margin: 0 !important;
            /* No external margins */
        }

        /* Navigation Buttons */
        .modern-nav-btn {
            position: absolute;
            top: 45%;
            /* Slightly above center to match image center */
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
            border: 1px solid rgba(0, 0, 0, 0.05);
            color: #333;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 200;
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 0.9;
        }

        .modern-nav-btn:hover {
            background: #006eb7;
            color: #fff;
            transform: translateY(-50%) scale(1.1);
            opacity: 1;
            box-shadow: 0 8px 25px rgba(0, 110, 183, 0.25);
        }

        .modern-nav-btn.prev {
            left: -10px;
        }

        .modern-nav-btn.next {
            right: -10px;
        }

        /* Product Card refinement for new layout */
        .modern-scroll-wrapper .product-container {
            width: 100%;
            border-radius: 12px;
            border: 1px solid #eee;
            transition: all 0.3s ease;
            height: 100%;
            background: #fff;
        }

        .modern-scroll-wrapper .product-container:hover {
            border-color: #006eb7;
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }

        cursor: pointer;
        pointer-events: auto;
        transition: all 0.2s ease;
        }

        .product-carousel.owl-carousel .owl-nav button.owl-prev {
            left: -20px;
        }

        .product-carousel.owl-carousel .owl-nav button.owl-next {
            right: -20px;
        }

        .product-carousel.owl-carousel .owl-nav button:hover {
            background: #006eb7 !important;
            color: #fff !important;
            transform: scale(1.1);
        }

        #flash-carousel,
        #new-carousel,
        .flash-products,
        .new-products,
        .product-carousel {
            display: flex !important;
            flex-direction: row !important;
            grid-template-columns: none !important;
            grid-template-rows: none !important;
            grid: none !important;
        }

        /* Force specific container override */
        .carousel-container>ul,
        .carousel-container>.product-carousel,
        .carousel-container>.flash-products,
        .carousel-container>.new-products {
            display: flex !important;
            flex-direction: row !important;
            overflow-x: auto !important;
            grid: none !important;
        }

        /* ========== USER REQUESTED UI FIXES (ROUND 3 - POLISH) ========== */

        /* 1. Header Logo - Enlarge */
        .brand-logo img {
            height: 42px !important;
            /* Increased from 32px to 42px */
        }

        .header-row-1 {
            padding: 6px 0 !important;
            /* Slight increase to accommodate larger logo */
        }

        /* 2. Search Bar - Remove Border/Outline on Select */
        .search-container.ps-search-wrapper {
            border-radius: 8px !important;
            height: 40px !important;
            /* Back to 40px for better fit with larger header */
            background: #f5f5f7 !important;
            border: 1px solid transparent !important;
            transition: all 0.2s ease !important;
        }

        /* Remove default blue outline */
        .search-container.ps-search-wrapper:focus-within {
            background: #fff !important;
            /* Replace blue outline with subtle shadow or border */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
            border-color: #e1e1e1 !important;
            outline: none !important;
        }

        .search-input:focus {
            outline: none !important;
        }

        /* 3. Mega Menu Modernization (Interactive Cards) */

        /* More spacing in columns */
        .mega-col li {
            margin-bottom: 6px;
        }

        /* "Button-like" interactive links */
        .mega-col li a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            color: #555;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            background: transparent;
        }

        /* On Hover */
        .mega-col li a:hover {
            background: #f5f7fa;
            /* Light gray background */
            color: var(--color-primary);
            transform: translateX(4px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
        }

        /* Remove the old circle, replace with an active indicator on hover only, or just clean style */
        .mega-col li a::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ddd;
            transition: all 0.2s;
            opacity: 0.5;
        }

        .mega-col li a:hover::before {
            background: var(--color-primary);
            transform: scale(1.5);
            opacity: 1;
        }

        /* Refine Titles */
        .mega-col h4 {
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f0f0f0;
            /* Softer divider */
            color: #333;
        }

        .flash-products .product-container {
            height: 100%;
            border: 3px solid var(--color-gray-200);
            border-radius: 16px;
            transition: all 0.3s ease;
            background: var(--color-white);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .flash-products .product-container:hover {
            border-color: var(--color-danger);
            box-shadow: 0 12px 30px rgba(255, 59, 48, 0.25);
        }

        .flash-products .left-block {
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
        }

        .flash-products .left-block img {
            width: 100%;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center top !important;
            transform-origin: center top !important;
            transform: scale(1.07) !important;
            transition: transform 0.3s ease;
        }

        .flash-products .product-container:hover .left-block img {
            /* Zoom effect removed */
        }

        /* =========================================
   USER REQUESTED UI FIXES (ROUND 2)
   ========================================= */

        /* Updated Header Spacing & Icons */
        .header-row-1 {
            padding: 10px 0 !important;
        }

        .header-row-1 .logo img {
            max-height: 42px !important;
            width: auto !important;
        }

        .header-row-1 .header-icons i {
            font-size: 24px !important;
            /* Slightly smaller for balance */
            color: #333;
        }

        .header-row-1 .header-icons .icon-box {
            width: 32px !important;
            height: 32px !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Modern Search Bar */
        .header-search-form input[type="text"] {
            height: 40px !important;
            border-radius: 6px 0 0 6px !important;
            border: 1px solid #e0e0e0 !important;
            padding-left: 15px !important;
            font-size: 14px;
            outline: none !important;
            box-shadow: none !important;
        }

        .header-search-form input[type="text"]:focus {
            border-color: #006eb7 !important;
            box-shadow: 0 2px 8px rgba(0, 110, 183, 0.1) !important;
        }

        .header-search-form button {
            height: 40px !important;
            border-radius: 0 6px 6px 0 !important;
            background: #006eb7 !important;
            color: #fff !important;
        }

        /* Modern Mega Menu */
        .mega-dropdown-container {
            background: #fff;
            border: 1px solid #eee;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            padding: 30px;
            border-radius: 0 0 8px 8px;
            margin-top: 0;
            /* Fix gap */
        }

        .mega-dropdown-container::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 20px;
            background: transparent;
            /* Bridge for hover */
        }

        .mega-col .cat-title {
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #222 !important;
            text-transform: uppercase;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f0f0f0;
        }

        .mega-col ul.sub-cats li a {
            font-size: 14px !important;
            color: #555 !important;
            padding: 8px 10px;
            display: block;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .mega-col ul.sub-cats li a:hover {
            background: #f8f9fa;
            color: #006eb7 !important;
            transform: translateX(5px);
            font-weight: 500;
        }

        /* =========================================
   PROSTAR MODERN PRODUCT DETAIL STYLES
   ========================================= */

        /* Container */
        .ps-product-detail-page {
            background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
            padding: 40px 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
            /* Prevent horizontal scroll on mobile */
        }

        .ps-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 15px;
            /* Slightly reduced padding for mobile space */
        }

        /* Main Grid */
        .ps-product-grid {
            display: grid;
            grid-template-columns: 55% 45%;
            gap: 50px;
            align-items: start;
        }

        @media (max-width: 992px) {
            .ps-product-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        /* GALLERY SECTION */
        .ps-gallery-column {
            position: sticky;
            top: 20px;
        }

        .ps-gallery-wrapper {
            background: #fff;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
            border: 1px solid #eef2f7;
        }

        .ps-main-image-box {
            position: relative;
            background: linear-gradient(135deg, #fafbfc 0%, #f0f3f7 100%);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            min-height: 400px;
            max-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #e8ecf1;
        }

        .ps-main-image {
            max-width: 100%;
            max-height: 460px;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: all 0.4s ease;
            cursor: zoom-in;
        }

        .ps-main-image-box:hover .ps-main-image {
            transform: scale(1.03);
        }

        .ps-badges {
            position: absolute;
            top: 15px;
            left: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 10;
        }

        .ps-badges .ps-badge,
        .ps-badges span {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .ps-zoom-hint {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .ps-main-image-box:hover .ps-zoom-hint {
            opacity: 1;
        }

        /* ========== MODERN MODAL LIGHTBOX ========== */
        .ps-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
            animation: modalFadeIn 0.3s ease;
            backdrop-filter: blur(8px);
        }

        .ps-modal-overlay.active {
            display: flex;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .ps-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            animation: modalZoomIn 0.3s ease;
        }

        @keyframes modalZoomIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .ps-modal-image {
            max-width: 90vw;
            max-height: 85vh;
            object-fit: contain;
            border-radius: 12px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
        }

        .ps-modal-close {
            position: absolute;
            top: -50px;
            right: 0;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .ps-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .ps-modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .ps-modal-nav:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .ps-modal-prev {
            left: -70px;
        }

        .ps-modal-next {
            right: -70px;
        }

        .ps-modal-counter {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            font-weight: 500;
        }

        /* Mobile modal adjustments */
        @media (max-width: 768px) {
            .ps-modal-nav {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .ps-modal-prev {
                left: 10px;
            }

            .ps-modal-next {
                right: 10px;
            }

            .ps-modal-close {
                top: -45px;
                right: 5px;
            }

            .ps-modal-image {
                border-radius: 8px;
            }
        }

        /* Thumbnails - Horizontal Layout Below Main Image */
        .ps-thumbnails-horizontal {
            margin-top: 15px;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
        }

        #urunResimListContainer {
            width: 100%;
        }

        /* Hide thumbnails initially - JS will fix paths and reveal */
        #urunResimListContainer img {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #urunResimListContainer img.path-fixed {
            opacity: 1;
        }

        #urunResimListContainer ul {
            display: flex;
            flex-direction: row;
            gap: 12px;
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 10px;
            scroll-behavior: smooth;
        }

        #urunResimListContainer ul::-webkit-scrollbar {
            height: 6px;
            background-color: #e0e0e0;
            border-radius: 3px;
        }

        #urunResimListContainer ul::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-color: #006eb7;
        }

        #urunResimListContainer li {
            flex: 0 0 110px;
            width: 110px;
            height: 110px;
            min-width: 110px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s ease;
            background: #fff;
            padding: 0;
        }

        #urunResimListContainer li:hover {
            border-color: #006eb7;
            box-shadow: 0 4px 15px rgba(0, 110, 183, 0.2);
        }

        #urunResimListContainer li.active {
            border-color: #006eb7;
            box-shadow: 0 4px 15px rgba(0, 110, 183, 0.3);
        }

        #urunResimListContainer li a {
            display: block;
            width: 100%;
            height: 100%;
        }

        #urunResimListContainer li img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            border-radius: 0;
            padding: 0;
        }

        #urunResimListContainer li a i.fa-play {
            font-size: 28px;
            color: #ff0000;
        }

        /* Responsive */
        @media (max-width: 992px) {
            #urunResimListContainer li {
                flex: 0 0 100px;
                width: 100px;
                height: 100px;
                min-width: 100px;
            }

            .ps-main-image-box {
                min-height: 350px;
                max-height: 450px;
            }
        }

        @media (max-width: 576px) {
            #urunResimListContainer li {
                flex: 0 0 90px;
                width: 90px;
                height: 90px;
                min-width: 90px;
            }

            .ps-thumbnails-horizontal {
                padding: 10px;
            }

            .ps-main-image-box {
                min-height: 280px;
                max-height: 380px;
                padding: 15px;
            }
        }

        #urunResimListContainer li:hover {
            border-color: #006eb7;
            box-shadow: 0 8px 25px rgba(0, 110, 183, 0.2);
        }

        #urunResimListContainer li.active {
            border-color: #006eb7;
            box-shadow: 0 4px 15px rgba(0, 110, 183, 0.25);
        }

        #urunResimListContainer li a {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            box-sizing: border-box;
        }

        #urunResimListContainer li img {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            object-position: center;
            padding: 0;
            border-radius: 0;
        }

        #urunResimListContainer li a i.fa-play {
            font-size: 28px;
            color: #ff0000;
        }

        /* Mobile Gallery - Use main gallery on all devices now */
        .ps-mobile-gallery {
            display: none;
            /* Hide Owl carousel, use thumbnail gallery instead */
        }

        /* Mobile Responsive - Keep main gallery visible, adjust sizing */
        @media (max-width: 992px) {
            .ps-gallery-wrapper {
                display: block;
                /* Keep visible on mobile */
                padding: 15px;
            }

            .ps-gallery-column {
                position: static;
            }

            .ps-main-image-box {
                padding: 15px;
                min-height: 300px;
                max-height: 400px;
            }

            .ps-thumbnails-horizontal {
                padding: 12px;
            }
        }

        @media (max-width: 576px) {
            .ps-gallery-wrapper {
                padding: 10px;
                border-radius: 12px;
            }

            .ps-main-image-box {
                padding: 10px;
                min-height: 250px;
                max-height: 350px;
                border-radius: 10px;
            }

            .ps-main-image {
                max-height: 320px;
            }

            .ps-thumbnails-horizontal {
                padding: 10px;
                margin-top: 10px;
            }

            .ps-zoom-hint {
                display: none;
                /* Hide on small mobile */
            }
        }

        /* INFO SECTION */
        .ps-info-column {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .ps-title-section {
            border-bottom: 1px solid #eef2f7;
            padding-bottom: 20px;
        }

        .ps-product-title {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a2e;
            line-height: 1.3;
            margin: 0 0 15px 0;
        }

        .ps-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            font-size: 14px;
            color: #666;
        }

        .ps-meta-row a {
            color: #006eb7;
            font-weight: 600;
        }

        /* Price Section */
        .ps-price-section {
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
            border-radius: 16px;
            padding: 25px;
            border: 1px solid #cce5ff;
        }

        .ps-price-main {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }

        .ps-old-price {
            font-size: 18px;
            color: #999;
            text-decoration: line-through;
        }

        .ps-current-price {
            font-size: 36px;
            font-weight: 800;
            color: #006eb7;
            text-shadow: 0 2px 4px rgba(0, 110, 183, 0.1);
        }

        .ps-price-section .discount {
            background: #ff4757;
            color: #fff;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .ps-installment {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #555;
            font-size: 14px;
        }

        .ps-installment i {
            color: #006eb7;
            font-size: 18px;
        }

        /* Stock Section */
        .ps-stock-section {
            padding: 15px 20px;
            border-radius: 12px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
        }

        .ps-stock-section .stock-amount {
            color: #15803d;
            font-weight: 600;
            margin: 0;
        }

        .ps-stock-section .alert-danger {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
            border-radius: 8px;
            padding: 12px;
            margin: 0;
        }

        /* Info Grid */
        .ps-info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .ps-info-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px;
            background: #fff;
            border-radius: 12px;
            border: 1px solid #eef2f7;
            transition: all 0.3s ease;
        }

        .ps-info-item:hover {
            border-color: #006eb7;
            box-shadow: 0 4px 15px rgba(0, 110, 183, 0.1);
        }

        .ps-info-item i {
            font-size: 24px;
            color: #006eb7;
        }

        .ps-info-item strong {
            display: block;
            font-size: 14px;
            color: #333;
        }

        .ps-info-item span {
            font-size: 13px;
            color: #666;
        }

        @media (max-width: 768px) {
            .ps-info-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Options Section */
        .ps-options-section {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #eef2f7;
            padding: 20px;
        }

        /* Cart Section */
        .ps-cart-section {
            background: #fff;
            border-radius: 16px;
            border: 2px solid #006eb7;
            padding: 25px;
        }

        .ps-quantity {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .ps-quantity label {
            font-weight: 600;
            color: #333;
        }

        .ps-quantity input {
            width: 80px;
            padding: 12px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            text-align: center;
        }

        .ps-action-buttons {
            display: flex;
            gap: 12px;
        }

        .ps-btn-cart {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 30px;
            background: linear-gradient(135deg, #006eb7 0%, #0056b3 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .ps-btn-cart:hover {
            background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 110, 183, 0.3);
        }

        .ps-btn-buy {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px 20px;
            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .ps-btn-buy:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
        }

        .ps-btn-fav {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            font-size: 22px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            box-sizing: border-box;
        }

        .ps-btn-fav:hover {
            border-color: #ff4757;
            color: #ff4757;
            background: #fff5f5;
        }

        /* THUMBNAILS - Horizontal Scroll with Square Images */
        .ps-thumbnails-horizontal {
            margin-top: 15px;
            position: relative;
            padding: 0 40px;
            /* Space for arrows */
        }

        .ps-thumbnails-horizontal ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: nowrap !important;
            /* Force single line always */
            gap: 12px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scrollbar-width: none;
            /* Hide scrollbar Firefox */
            -webkit-overflow-scrolling: touch;
        }

        .ps-thumbnails-horizontal ul::-webkit-scrollbar {
            display: none;
            /* Hide scrollbar Chrome/Safari */
        }

        .ps-thumbnails-horizontal li {
            flex: 0 0 100px;
            /* Fixed width */
            width: 100px;
            height: 100px;
            /* Fixed height = Square */
            cursor: pointer;
            border-radius: 12px;
            border: 2px solid transparent;
            overflow: hidden;
            transition: all 0.2s ease;
            background: #fff;
            box-sizing: border-box;
        }

        .ps-thumbnails-horizontal li.active {
            border-color: #006eb7;
            box-shadow: 0 4px 12px rgba(0, 110, 183, 0.2);
        }

        .ps-thumbnails-horizontal img {
            width: 100%;
            height: 100%;
            object-fit: cover !important;
            /* Force cover to fill square */
            display: block;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .ps-thumbnails-horizontal li:hover img,
        .ps-thumbnails-horizontal li.active img {
            opacity: 1;
        }

        /* Add Navigation Arrows for Thumbnails */
        .ps-thumbnails-horizontal .modern-nav-btn {
            width: 30px;
            height: 30px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* Trust Badges */
        .ps-trust-section {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .ps-trust-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #555;
        }

        .ps-trust-item i {
            color: #22c55e;
            font-size: 17px;
        }

        /* TABS SECTION */
        /* PRODUCT TABS - Modern Scrollable Menu */
        .ps-tabs-section {
            margin-top: 60px;
            background: #fff;
            border-top: 1px solid #f0f0f0;
            padding: 40px 0;
        }

        .ps-tabs-nav {
            display: flex;
            gap: 20px;
            border-bottom: 2px solid #eee;
            margin-bottom: 30px;
            overflow-x: auto;
            /* Enable scroll on mobile */
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            padding-bottom: 1px;
            /* Avoid border clipping */
        }

        .ps-tabs-nav::-webkit-scrollbar {
            display: none;
        }

        .ps-tab-btn {
            background: none;
            border: none;
            padding: 15px 5px;
            font-size: 16px;
            font-weight: 600;
            color: #777;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
            min-width: max-content;
        }

        .ps-tab-btn:hover {
            color: #006eb7;
        }

        .ps-tab-btn.active {
            color: #006eb7;
        }

        .ps-tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            /* overlap border */
            left: 0;
            width: 100%;
            height: 3px;
            background: #006eb7;
            border-radius: 3px 3px 0 0;
        }

        .ps-tab-btn i {
            margin-right: 8px;
        }

        .ps-tab-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .ps-tab-panel.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Tab Content Typography */
        .ps-description-content {
            line-height: 1.8;
            color: #444;
        }

        .ps-description-content img {
            max-width: 100% !important;
            height: auto !important;
        }

        /* RELATED PRODUCTS */
        .ps-related-section {
            background: #f8fafc;
            padding: 60px 0;
        }

        .ps-section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .ps-section-header h2 {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a2e;
        }

        .ps-section-header h2 i {
            color: #ff4757;
            margin-right: 10px;
        }

        .ps-related-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        @media (max-width: 768px) {

            /* Smaller Action Buttons on Mobile */
            .ps-action-buttons {
                gap: 8px;
            }

            .ps-btn-cart,
            .ps-btn-buy {
                padding: 0 12px;
                height: 40px;
                font-size: 13px;
            }

            .ps-btn-cart i,
            .ps-btn-buy i {
                font-size: 14px;
                margin-right: 6px;
            }

            .ps-btn-fav {
                width: 40px;
                height: 40px;
            }

            /* Ensure Thumbnails Single Row on Mobile */
            .ps-thumbnails-horizontal {
                padding: 0 10px;
                /* Reduced padding */
            }

            .ps-thumbnails-horizontal ul {
                flex-wrap: nowrap !important;
                /* Force single row */
                overflow-x: auto !important;
                scroll-snap-type: x mandatory;
            }

            .ps-thumbnails-horizontal li {
                flex: 0 0 80px;
                /* Slightly smaller thumbnails on mobile */
                width: 80px;
                height: 80px;
            }
        }

        .ps-related-grid .ps-product-item {
            flex: 0 0 calc(20% - 16px);
            max-width: calc(20% - 16px);
        }

        @media (max-width: 1200px) {
            .ps-related-grid .ps-product-item {
                flex: 0 0 calc(25% - 15px);
                max-width: calc(25% - 15px);
            }
        }

        @media (max-width: 992px) {
            .ps-related-grid .ps-product-item {
                flex: 0 0 calc(33.33% - 14px);
                max-width: calc(33.33% - 14px);
            }
        }

        @media (max-width: 768px) {
            .ps-related-grid .ps-product-item {
                flex: 0 0 calc(50% - 10px);
                max-width: calc(50% - 10px);
            }
        }

        .product-detail-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- LEFT COLUMN: GALLERY --- */
        .product-gallery-section {
            flex: 0 0 52%;
            max-width: 52%;
            position: sticky;
            top: 20px;
        }

        .main-image-container {
            background: #fff;
            border: 1px solid #f0f0f0;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            text-align: center;
            /* Removed large fixed min-height to reduce gaps */
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
        }

        .main-img-wrapper img {
            max-width: 100%;
            /* Limit height to prevent taking over screen, but allow auto scale */
            max-height: 500px;
            height: auto;
            object-fit: contain;
        }

        .image-thumbnails {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 10px 5px;
            justify-content: flex-start;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #f0f0f0;
        }

        /* Target the actual ul/li structure */
        #urunResimListContainer {
            width: 100%;
        }

        #urunResimListContainer ul {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            list-style: none;
            padding: 0;
            margin: 0;
            justify-content: center;
        }

        #urunResimListContainer li {
            flex: 0 0 80px;
            height: 80px;
            border: 2px solid #e8e8e8;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s ease;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        #urunResimListContainer li:hover {
            border-color: #006eb7;
            box-shadow: 0 6px 15px rgba(0, 110, 183, 0.15);
        }

        #urunResimListContainer li.active {
            border-color: #006eb7;
            border-width: 3px;
            box-shadow: 0 4px 12px rgba(0, 110, 183, 0.2);
        }

        #urunResimListContainer li a {
            display: block;
            width: 100%;
            height: 100%;
            padding: 0;
            box-sizing: border-box;
        }

        #urunResimListContainer li img {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            object-position: center;
            padding: 0;
            border-radius: 0;
        }

        /* Video thumbnail style */
        #urunResimListContainer li a i.fa-play {
            font-size: 24px;
            color: #ff0000;
            background: rgba(255, 255, 255, 0.9);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .image-thumbnails a {
            flex: 0 0 80px;
            height: 80px;
            border: 2px solid #eee;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s ease;
            background: #fff;
        }

        .image-thumbnails a:hover,
        .image-thumbnails a.active {
            border-color: #006eb7;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 110, 183, 0.15);
        }

        .image-thumbnails img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 5px;
        }

        /* --- RIGHT COLUMN: INFO --- */
        .product-info-section {
            flex: 1;
            padding-left: 15px;
        }

        .product-title {
            font-size: 26px;
            /* Optimized sizing */
            font-weight: 800;
            color: #111;
            line-height: 1.3;
            margin-bottom: 15px;
            letter-spacing: -0.3px;
        }

        /* ... (Meta info remains same) ... */

        /* Price Section Tweak */
        .current-price {
            font-size: 38px;
            font-weight: 900;
            color: #006eb7;
            letter-spacing: -1.5px;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(0, 110, 183, 0.1);
        }

        /* Description Content Fix */
        .product-description.full-content {
            font-size: 15px;
            line-height: 1.8;
            color: #444;
        }

        .product-description img {
            max-width: 100% !important;
            height: auto !important;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        /* Responsive Tweak for Mobile */
        @media (max-width: 768px) {
            .modern-product-detail {
                padding: 10px 0;
            }

            .product-detail-grid {
                gap: 20px;
                padding: 0 10px;
            }

            .product-title {
                font-size: 22px;
            }

            .current-price {
                font-size: 32px;
            }

            .add-to-cart-button .action {
                font-size: 16px;
            }
        }

        .product-meta-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 20px;
        }

        /* Price Stylings */
        .price-section {
            margin-bottom: 25px;
        }

        .current-price {
            font-size: 36px;
            font-weight: 900;
            color: #006eb7;
            letter-spacing: -1px;
            line-height: 1;
        }

        .price-extras {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
        }

        .old-price {
            font-size: 18px;
            color: #999;
            text-decoration: line-through;
            font-weight: 500;
        }

        .discount-badge {
            background: #ffecf0;
            color: #e61e4d;
            font-weight: 700;
            font-size: 13px;
            padding: 4px 10px;
            border-radius: 20px;
        }

        .installment-text {
            font-size: 13px;
            color: #555;
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Info Grid (Stock, Shipping) */
        .info-box-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-bottom: 25px;
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #eee;
        }

        .info-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .info-item .icon-wrap {
            color: #006eb7;
            font-size: 20px;
            background: #eef6fa;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .info-item .text-wrap {
            display: flex;
            flex-direction: column;
        }

        .info-item strong {
            font-size: 13px;
            color: #222;
        }

        .info-item span {
            font-size: 13px;
            color: #666;
        }

        /* Action Buttons */
        .action-buttons-container {
            background: #fff;
            padding: 20px 0;
            border-top: 1px solid #f0f0f0;
            margin-top: 20px;
        }

        .quantity-wrapper {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .quantity-wrapper .qty-label {
            font-weight: 600;
        }

        .quantity-wrapper input {
            width: 60px !important;
            height: 45px !important;
            border: 2px solid #ddd;
            border-radius: 8px;
            text-align: center;
            font-weight: 700;
        }

        .main-actions {
            display: flex;
            gap: 15px;
        }

        .add-to-cart-button {
            flex: 2;
            background: linear-gradient(135deg, #006eb7 0%, #005a96 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(0, 110, 183, 0.25);
            transition: transform 0.2s;
        }

        .add-to-cart-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 25px rgba(0, 110, 183, 0.35);
        }

        .add-to-cart-button .btn-content {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .add-to-cart-button i {
            font-size: 24px;
        }

        .add-to-cart-button .btn-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1.2;
        }

        .add-to-cart-button .action {
            font-size: 18px;
            font-weight: 700;
        }

        .add-to-cart-button .sub {
            font-size: 11px;
            opacity: 0.9;
        }

        .buy-now-button {
            flex: 1;
            background: #fff;
            border: 2px solid #006eb7;
            color: #006eb7;
            border-radius: 10px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .buy-now-button:hover {
            background: #f0f8ff;
        }

        .fav-button {
            width: 60px;
            border: 2px solid #eee;
            background: #fff;
            border-radius: 10px;
            color: #999;
            font-size: 22px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .fav-button:hover {
            color: #e61e4d;
            border-color: #ffecf0;
            background: #fff0f3;
        }

        .trust-badges {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            padding-top: 20px;
        }

        .badge-item {
            font-size: 12px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .badge-item i {
            color: #2ecc71;
        }

        /* --- TABS --- */
        .modern-product-tabs {
            background: #fff;
            margin-top: 60px;
        }

        .tabs-header-wrapper {
            border-bottom: 2px solid #f0f0f0;
            background: #fff;
        }

        .tabs-container {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .tab-navigation {
            display: flex;
            gap: 40px;
        }

        .tab-button {
            background: transparent;
            border: none;
            padding: 20px 0;
            font-size: 16px;
            font-weight: 600;
            color: #777;
            cursor: pointer;
            position: relative;
            transition: color 0.2s;
        }

        .tab-button::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #006eb7;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .tab-button.active {
            color: #006eb7;
        }

        .tab-button.active::after {
            transform: scaleX(1);
        }

        /* Responsive */
        @media (max-width: 991px) {

            .product-gallery-section,
            .product-info-section {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .info-box-grid {
                grid-template-columns: 1fr;
            }

            .main-actions {
                flex-wrap: wrap;
            }

            .add-to-cart-button {
                width: 100%;
                flex: auto;
            }
        }

        .product-description.full-content {
            font-size: 15px;
            line-height: 1.7;
            color: #444;
        }

        .product-description img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
        }

        .flash-products .right-block {
            padding: 12px !important;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .flash-products .product-name {
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            height: auto !important;
            min-height: 34px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .flash-products .content_price {
            margin: auto 0 8px 0 !important;
        }

        .flash-products .price.old-price {
            font-size: 11px !important;
            color: var(--color-gray-400);
        }

        .flash-products .price.product-price {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: var(--color-danger);
        }

        .flash-products .add-to-cart-btn {
            padding: 8px 12px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
            background: var(--color-danger) !important;
            border: none !important;
            color: white !important;
            transition: all 0.3s ease !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px;
        }

        .flash-products .add-to-cart-btn:hover {
            background: #e6332a !important;
            transform: translateY(-1px) !important;
        }

        /* ========== UNIFIED PRODUCT CONTAINER STYLES ========== */
        .product-carousel .product-container,
        .flash-products .product-container,
        .new-products .product-container {
            height: 100% !important;
            border: 3px solid var(--color-gray-200) !important;
            border-radius: 16px !important;
            transition: all 0.3s ease !important;
            background: var(--color-white) !important;
            display: flex !important;
            flex-direction: column !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        }

        .product-carousel .product-container:hover,
        .flash-products .product-container:hover,
        .new-products .product-container:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
        }

        .flash-products .product-container:hover {
            border-color: var(--color-danger) !important;
            box-shadow: 0 12px 30px rgba(255, 59, 48, 0.25) !important;
        }

        .new-products .product-container:hover {
            border-color: #ff7f00 !important;
            box-shadow: 0 12px 30px rgba(255, 127, 0, 0.25) !important;
        }

        /* Add color variations for different sections */
        .section:nth-child(odd) .product-container:hover {
            border-color: var(--color-success) !important;
            box-shadow: 0 8px 25px rgba(52, 199, 89, 0.15) !important;
        }

        .section:nth-child(even) .product-container:hover {
            border-color: var(--color-accent) !important;
            box-shadow: 0 8px 25px rgba(0, 113, 227, 0.15) !important;
        }

        /* ========== UNIFIED PRODUCT STYLES ========== */
        .product-carousel .left-block,
        .flash-products .left-block,
        .new-products .left-block {
            height: auto !important;
            aspect-ratio: 1 / 1 !important;
            border-radius: 10px 10px 0 0 !important;
            overflow: hidden !important;
        }

        .product-carousel .left-block img,
        .flash-products .left-block img,
        .new-products .left-block img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            transition: transform 0.3s ease !important;
        }

        /* Flaş / yeni: kare kutu; üst sabit, alttan çok hafif kırpma (scale + origin top) */
        .flash-products .left-block img,
        .new-products .left-block img {
            object-position: center top !important;
            transform-origin: center top !important;
            transform: scale(1.07) !important;
        }

        .product-carousel .product-container:hover .left-block img,
        .flash-products .product-container:hover .left-block img,
        .new-products .product-container:hover .left-block img {
            /* Zoom effects removed - keeping only border effects */
        }

        .product-carousel .right-block,
        .flash-products .right-block,
        .new-products .right-block {
            padding: 12px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 8px !important;
            flex: 1 !important;
        }

        .product-carousel .product-name,
        .flash-products .product-name,
        .new-products .product-name {
            font-size: 13px !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            height: auto !important;
            min-height: 34px !important;
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
        }

        .product-carousel .content_price,
        .flash-products .content_price,
        .new-products .content_price {
            margin: auto 0 8px 0 !important;
        }

        .product-carousel .price.old-price,
        .flash-products .price.old-price,
        .new-products .price.old-price {
            font-size: 11px !important;
            color: var(--color-gray-400) !important;
            text-decoration: line-through !important;
        }

        .product-carousel .price.product-price,
        .flash-products .price.product-price,
        .new-products .price.product-price {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: var(--color-accent) !important;
        }

        .product-carousel .add-to-cart-btn,
        .flash-products .add-to-cart-btn,
        .new-products .add-to-cart-btn {
            padding: 8px 12px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            border-radius: 8px !important;
            background: var(--color-accent) !important;
            border: none !important;
            color: white !important;
            transition: all 0.3s ease !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            margin-top: auto !important;
        }

        .flash-products .add-to-cart-btn:hover {
            background: #e6332a !important;
            transform: translateY(-1px) !important;
        }

        .new-products .add-to-cart-btn:hover {
            background: #ff7f00 !important;
            transform: translateY(-1px) !important;
        }

        /* ========== PRODUCT DETAIL COMPACT CONTENT ========== */
        .compact-content .description-preview {
            max-height: 200px;
            overflow: hidden;
            position: relative;
            transition: max-height 0.3s ease;
        }

        .compact-content.expanded .description-preview {
            max-height: none;
        }

        .compact-content .description-preview::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(transparent, var(--color-white));
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .compact-content.expanded .description-preview::after {
            opacity: 0;
        }

        .expand-content-btn {
            background: var(--color-primary);
            color: var(--color-white);
            border: none;
            padding: 12px 20px;
            border-radius: var(--radius-lg);
            font-weight: 600;
            margin-top: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            justify-content: center;
        }

        .expand-content-btn:hover {
            background: var(--color-primary-dark);
            transform: translateY(-1px);
        }

        .expand-content-btn .expand-icon {
            transition: transform 0.3s ease;
        }

        .compact-content.expanded .expand-content-btn .expand-icon {
            transform: rotate(180deg);
        }

        /* ========== CATEGORY PAGE MODERN GRID ========== */
        .category-products-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
            gap: 24px !important;
            margin: 20px 0 !important;
        }

        @media (max-width: 768px) {
            .category-products-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
                gap: 24px !important;
            }
        }

        @media (max-width: 480px) {
            .category-products-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
                gap: 12px !important;
            }
        }

        /* Category page override product grid CSS */
        .category-page .product-grid,
        .category-content .product-grid,
        body.category .product-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
            gap: 24px !important;
            margin: 20px 0 !important;
        }

        /* ========== FEATURES BAR ========== */
        .features-bar {
            background: var(--color-white);
            padding: 20px 0;
            border-top: 1px solid var(--color-gray-200);
            border-bottom: 1px solid var(--color-gray-200);
        }

        .features-wrap {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .feature {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            background: var(--color-gray-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent);
            font-size: 20px;
            flex-shrink: 0;
        }

        .feature-text h4 {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 1px;
            color: var(--color-gray-900);
        }

        .feature-text p {
            font-size: 11px;
            color: var(--color-gray-500);
        }

        @media (max-width: 992px) {
            .features-wrap {
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
            }
        }

        @media (max-width: 768px) {
            .features-bar {
                padding: 16px 0;
            }

            .features-wrap {
                gap: 12px;
            }

            .feature-icon {
                width: 42px;
                height: 42px;
                font-size: 18px;
            }

            .feature-text h4 {
                font-size: 12px;
            }

            .feature-text p {
                font-size: 10px;
            }
        }

        /* ========== PRODUCT GRID ========== */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }

        @media (max-width: 1200px) {
            .product-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 14px;
            }
        }

        @media (max-width: 992px) {
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }
        }

        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
        }

        /* ========== PRODUCT CARD - PROFESSIONAL STANDARD ========== */
        .product-container {
            background: var(--color-white);
            border-radius: var(--radius);
            border: 1px solid var(--color-gray-200);
            overflow: visible;
            transition: var(--transition);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .product-container:hover {
            border-color: var(--color-accent);
            box-shadow: 0 8px 25px rgba(0, 113, 227, 0.15);
        }

        /* Image Block */
        .product-container .left-block {
            position: relative;
            padding-top: 100%;
            background: var(--color-gray-50);
            border-radius: var(--radius) var(--radius) 0 0;
            overflow: hidden;
        }

        .product-container .imgLink {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            padding: 0;
        }

        .product-container .imgLink img {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: cover;
            object-position: center center;
            display: block;
            vertical-align: top;
            transition: var(--transition);
        }

        .product-container:hover .imgLink img {
            /* Zoom effect removed - keeping only border effect */
        }

        /* Badges */
        .catalog-item-ribbons {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .ps-badge {
            display: inline-block;
            padding: 5px 10px;
            font-size: 10px;
            font-weight: 700;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: var(--shadow-sm);
        }

        .ps-badge-sale {
            background: var(--color-danger);
            color: var(--color-white);
        }

        .ps-badge-new {
            background: var(--color-success);
            color: var(--color-white);
        }

        .ps-badge-hot {
            background: var(--color-warning);
            color: var(--color-white);
        }

        /* Quick Actions */
        .product-container .buttons {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 3;
            display: flex;
            flex-direction: column;
            gap: 8px;
            opacity: 0;
            transform: translateX(10px);
            transition: var(--transition);
        }

        .product-container:hover .buttons {
            opacity: 1;
            transform: translateX(0);
        }

        .product-container .buttons a {
            width: 36px;
            height: 36px;
            background: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-gray-600);
            box-shadow: var(--shadow);
            transition: var(--transition-fast);
        }

        .product-container .buttons a:hover {
            background: var(--color-danger);
            color: var(--color-white);
            transform: scale(1.1);
        }

        /* Product Info Block */
        .product-container .right-block {
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .product-container .product-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--color-gray-900);
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            min-height: 34px;
        }

        .product-container .product-name a {
            color: inherit;
            transition: var(--transition-fast);
        }

        .product-container .product-name a:hover {
            color: var(--color-accent);
        }

        /* Prices */
        .product-container .content_price {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .product-container .old-price {
            font-size: 12px;
            color: var(--color-gray-400);
            text-decoration: line-through;
        }

        .product-container .product-price {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-gray-900);
            transition: var(--transition-fast);
        }

        .product-container:hover .product-price {
            color: var(--color-accent);
        }

        /* Add to Cart Button - ALWAYS IN RIGHT-BLOCK */
        .add-to-cart-btn {
            width: 100%;
            padding: 10px 12px;
            background: var(--color-primary);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: var(--transition);
            margin-top: auto;
        }

        .add-to-cart-btn:hover {
            background: var(--color-accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .add-to-cart-btn:active {
            transform: translateY(0);
        }

        .add-to-cart-btn i {
            font-size: 12px;
        }

        /* Mobile Optimizations */
        @media (max-width: 768px) {
            .product-container .right-block {
                padding: 10px;
                gap: 6px;
            }

            .product-container .product-name {
                font-size: 12px;
                min-height: 32px;
            }

            .product-container .product-price {
                font-size: 14px;
            }

            .product-container .old-price {
                font-size: 11px;
            }

            .add-to-cart-btn {
                padding: 8px 10px;
                font-size: 11px;
            }

            .product-container .buttons {
                opacity: 1;
                transform: translateX(0);
            }

            .product-container .buttons a {
                width: 30px;
                height: 30px;
                font-size: 13px;
            }
        }

        /* Tablet Optimizations */
        @media (min-width: 769px) and (max-width: 1024px) {
            .product-container .right-block {
                padding: 11px;
            }

            .product-container .product-name {
                font-size: 12px;
            }

            .product-container .product-price {
                font-size: 15px;
            }
        }

        /* ========== PRODUCT CAROUSEL ========== */
        .product-carousel {
            position: relative;
            min-height: 300px;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .product-carousel .owl-stage {
            display: flex;
            padding: 6px 0;
        }

        .product-carousel .owl-item {
            padding: 0 8px;
            display: block !important;
            visibility: visible !important;
        }

        .product-carousel .ps-product-item,
        .product-carousel li {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        .product-carousel .owl-nav {
            position: absolute;
            top: 50%;
            left: -20px;
            right: -20px;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            pointer-events: none;
        }

        .product-carousel .owl-nav button {
            width: 44px !important;
            height: 44px !important;
            background: var(--color-white) !important;
            border-radius: 50% !important;
            box-shadow: var(--shadow-lg) !important;
            pointer-events: all;
            color: var(--color-gray-900) !important;
            font-size: 18px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: var(--transition-fast) !important;
            border: 1px solid var(--color-gray-200) !important;
        }

        .product-carousel .owl-nav button:hover {
            background: var(--color-primary) !important;
            color: var(--color-white) !important;
            transform: scale(1.1) !important;
            border-color: var(--color-primary) !important;
        }

        /* Compact Carousel - 7-8 items per row */
        .product-carousel-compact .product-container {
            transform: scale(0.95);
        }

        .product-carousel-compact .owl-item {
            padding: 0 6px;
        }

        @media (max-width: 768px) {
            .product-carousel .owl-nav button {
                width: 36px !important;
                height: 36px !important;
                font-size: 16px !important;
            }

            .product-carousel-compact .product-container {
                transform: scale(1);
            }
        }

        /* ========== BANNER SECTIONS ========== */
        .banner-section {
            padding: 16px 0;
        }

        .banner-grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .banner-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .banner-grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .banner-full {
            width: 100%;
            border-radius: var(--radius);
            overflow: hidden;
        }

        .banner-item {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--color-gray-100);
            transition: var(--transition);
        }

        .banner-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .banner-item img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
            transition: var(--transition);
        }

        .banner-item:hover img {
            transform: scale(1.05);
        }

        .banner-link {
            display: block;
            position: relative;
        }

        .banner-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            color: var(--color-white);
            padding: 16px;
            font-size: 14px;
            font-weight: 600;
        }

        @media (max-width: 992px) {
            .banner-grid-2 {
                grid-template-columns: 1fr;
            }

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

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

        @media (max-width: 768px) {
            .banner-section {
                padding: 12px 0;
            }

            .banner-grid-2 {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .banner-grid-3 {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .banner-grid-4 {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .banner-title {
                font-size: 12px;
                padding: 12px;
            }
        }

        /* ========== FOOTER ========== */
        .site-footer {
            background: var(--color-gray-100);
            padding: 40px 0 20px;
            margin-top: 32px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: 32px;
            margin-bottom: 32px;
        }

        .footer-brand img {
            height: 36px;
            margin-bottom: 16px;
        }

        .footer-brand p {
            font-size: 13px;
            color: var(--color-gray-500);
            line-height: 1.5;
            max-width: 340px;
        }

        .footer-col h4 {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-gray-400);
            margin-bottom: 14px;
        }

        .footer-col ul li {
            margin-bottom: 10px;
        }

        .footer-col ul li a {
            font-size: 13px;
            color: var(--color-gray-600);
            transition: var(--transition-fast);
        }

        .footer-col ul li a:hover {
            color: var(--color-primary);
            padding-left: 4px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid var(--color-gray-200);
        }

        .footer-bottom p {
            font-size: 12px;
            color: var(--color-gray-400);
        }

        @media (max-width: 768px) {
            .site-footer {
                padding: 32px 0 16px;
                margin-top: 24px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-bottom: 20px;
            }

            .footer-brand {
                grid-column: span 2;
            }
        }

        /* ========== MOBILE BOTTOM NAV (footer sonrası, akışta — sabit değil) ========== */
        .mobile-nav {
            display: none;
            position: relative;
            bottom: auto;
            left: auto;
            right: auto;
            width: 100%;
            background: var(--color-white);
            border-top: 1px solid var(--color-gray-200);
            z-index: 1;
            padding: 6px 0 0;
            padding-bottom: env(safe-area-inset-bottom, 0px);
            box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06);
            margin: 0;
        }

        .mobile-nav-grid {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: var(--color-gray-400);
            font-size: 11px;
            font-weight: 500;
            padding: 6px 12px;
            min-width: 60px;
            transition: var(--transition-fast);
            -webkit-tap-highlight-color: transparent;
        }

        .mobile-nav-item i {
            font-size: 22px;
        }

        .mobile-nav-item.active,
        .mobile-nav-item:active {
            color: var(--color-primary);
        }

        @media (max-width: 768px) {
            .mobile-nav {
                display: block;
            }

            /* Sabit alt menü yok — ekstra sayfa altı boşluk yok */
            body {
                padding-bottom: 0 !important;
            }
        }

        /* ========== WHATSAPP FLOAT ========== */
        .whatsapp-float {
            position: fixed;
            bottom: 28px;
            right: 28px;
            width: 60px;
            height: 60px;
            background: #25D366;
            color: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
            z-index: 998;
            transition: var(--transition);
            animation: pulse-wa 2s infinite;
        }

        .whatsapp-float:hover {
            transform: scale(1.12);
            box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
            animation: none;
        }

        @keyframes pulse-wa {

            0%,
            100% {
                box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
            }

            50% {
                box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
            }
        }

        @media (max-width: 768px) {
            .whatsapp-float {
                left: auto;
                right: 14px;
                bottom: calc(96px + env(safe-area-inset-bottom, 0px));
                width: 54px;
                height: 54px;
                font-size: 28px;
                z-index: 100200;
            }
        }

        /* ========== ANIMATIONS ========== */
        .lozad {
            opacity: 0;
            transition: opacity 0.4s ease;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .lozad.loaded {
            opacity: 1;
            background: transparent;
            animation: none;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* ========== CATEGORY PAGE LAYOUT ========== */
        .page-container {
            display: flex;
            gap: 24px;
            align-items: flex-start;
        }

        .sidebar {
            width: 280px;
            flex-shrink: 0;
        }

        .main-content {
            flex: 1;
            min-width: 0;
        }

        @media (max-width: 992px) {
            .page-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }
        }

        /* Kategori: grid yalnızca ul — .view-product-list div’e grid verilmez (tek sıra ürün hatası) */
        .category_prod ul.product-list,
        .category_prod ul.urunler {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }

        @media (min-width: 768px) {

            .category_prod ul.product-list,
            .category_prod ul.urunler {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 24px;
            }
        }

        @media (min-width: 1200px) {

            .category_prod ul.product-list,
            .category_prod ul.urunler {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 30px;
            }
        }

        /* Category Header */
        .category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 0;
            border-bottom: 1px solid var(--color-gray-200);
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .category-info h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 4px;
        }

        .category-count {
            font-size: 14px;
            color: var(--color-gray-500);
        }

        /* Sorting Dropdown */
        .sort-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sort-label {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-600);
        }

        .sort-select {
            padding: 10px 16px;
            padding-right: 36px;
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-900);
            cursor: pointer;
            transition: var(--transition-fast);
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .sort-select:hover,
        .sort-select:focus {
            border-color: var(--color-accent);
            outline: none;
        }

        .sort-select option {
            padding: 10px;
        }

        @media (max-width: 768px) {
            .category-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .sort-controls {
                width: 100%;
            }

            .sort-select {
                width: 100%;
            }
        }

        /* Product Grid - 4 columns for category pages */
        .category-products,
        .page-container .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        /* Override 5-column grid for category pages */
        body[class*="pagekategori"] .product-grid,
        body[class*="pagearama"] .product-grid {
            grid-template-columns: repeat(4, 1fr) !important;
        }

        @media (max-width: 1200px) {

            .category-products,
            .page-container .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {

            .category-products,
            .page-container .product-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
        }

        /* Filter Sidebar */
        .filter-box {
            background: var(--color-white);
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius);
            padding: 20px;
            margin-bottom: 20px;
        }

        .filter-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-gray-900);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .filter-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .filter-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid var(--color-gray-300);
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition-fast);
        }

        .filter-checkbox:checked {
            background: var(--color-accent);
            border-color: var(--color-accent);
        }

        .filter-label {
            font-size: 14px;
            color: var(--color-gray-600);
            cursor: pointer;
            flex: 1;
        }

        .filter-count {
            font-size: 12px;
            color: var(--color-gray-400);
        }

        /* Price Range Filter */
        .price-range {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-top: 12px;
        }

        .price-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            font-size: 13px;
            text-align: center;
        }

        .price-separator {
            color: var(--color-gray-400);
        }

        /* ========== PRODUCT DETAIL PAGE ========== */
        .product-detail-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            padding: 32px 0;
        }

        /* Product Gallery */
        .product-gallery {
            position: sticky;
            top: 80px;
        }

        .product-main-image {
            position: relative;
            padding-top: 100%;
            background: var(--color-gray-50);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 16px;
        }

        .product-main-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 24px;
        }

        .product-thumbs {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }

        .product-thumb {
            aspect-ratio: 1;
            background: var(--color-gray-50);
            border-radius: var(--radius-sm);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            transition: var(--transition-fast);
        }

        .product-thumb:hover,
        .product-thumb.active {
            border-color: var(--color-accent);
        }

        .product-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
        }

        /* Product Info */
        .product-detail-info {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .product-detail-title {
            font-size: 32px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--color-gray-900);
        }

        .product-meta {
            display: flex;
            gap: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .meta-item {
            font-size: 14px;
            color: var(--color-gray-600);
        }

        .meta-item strong {
            color: var(--color-gray-900);
            font-weight: 600;
        }

        .product-detail-price {
            padding: 24px;
            background: var(--color-gray-50);
            border-radius: var(--radius);
        }

        .price-old {
            font-size: 16px;
            color: var(--color-gray-400);
            text-decoration: line-through;
            margin-bottom: 8px;
        }

        .price-new {
            font-size: 36px;
            font-weight: 700;
            color: var(--color-gray-900);
        }

        .price-discount {
            display: inline-block;
            margin-left: 12px;
            padding: 4px 12px;
            background: var(--color-danger);
            color: var(--color-white);
            font-size: 14px;
            font-weight: 600;
            border-radius: 20px;
        }

        .product-actions-detail {
            display: flex;
            gap: 12px;
            padding: 24px 0;
            border-top: 1px solid var(--color-gray-200);
        }

        .qty-selector {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius);
        }

        .qty-btn {
            width: 32px;
            height: 32px;
            background: var(--color-gray-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--color-gray-600);
            cursor: pointer;
        }

        .qty-input {
            width: 60px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            border: none;
            background: transparent;
        }

        .btn-add-to-cart-large {
            flex: 1;
            padding: 16px 32px;
            background: var(--color-primary);
            color: var(--color-white);
            font-size: 16px;
            font-weight: 600;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: var(--transition);
        }

        .btn-add-to-cart-large:hover {
            background: var(--color-accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .product-tabs {
            margin-top: 48px;
            border-top: 1px solid var(--color-gray-200);
            padding-top: 32px;
        }

        .tab-nav {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .tab-link {
            padding: 12px 24px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-600);
            border-bottom: 2px solid transparent;
            transition: var(--transition-fast);
        }

        .tab-link.active,
        .tab-link:hover {
            color: var(--color-accent);
            border-bottom-color: var(--color-accent);
        }

        .tab-content {
            padding: 24px 0;
            font-size: 15px;
            line-height: 1.8;
            color: var(--color-gray-600);
        }

        @media (max-width: 992px) {
            .product-detail-layout {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .product-gallery {
                position: static;
            }

            .product-detail-title {
                font-size: 24px;
            }

            .price-new {
                font-size: 28px;
            }
        }

        @media (max-width: 768px) {
            .product-meta {
                flex-direction: column;
                gap: 12px;
            }

            .product-actions-detail {
                flex-direction: column;
            }

            .tab-nav {
                overflow-x: auto;
            }

            .tab-link {
                font-size: 13px;
                padding: 10px 16px;
                white-space: nowrap;
            }
        }

        /* ========== PAGINATION ========== */
        .pagination-wrapper {
            display: flex;
            justify-content: center;
            padding: 40px 0;
        }

        .pagination {
            display: flex;
            gap: 8px;
            list-style: none;
        }

        .pagination li a,
        .pagination li span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            background: var(--color-white);
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-600);
            transition: var(--transition-fast);
        }

        .pagination li a:hover {
            background: var(--color-gray-100);
            border-color: var(--color-gray-300);
            color: var(--color-primary);
        }

        .pagination li.active span {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
        }

        /* ========== UTILITIES ========== */
        .text-center {
            text-align: center;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        /* Safe area for notch devices */
        @supports (padding: max(0px)) {
            body {
                padding-left: max(0px, env(safe-area-inset-left));
                padding-right: max(0px, env(safe-area-inset-right));
            }
        }

        /* Focus visible for accessibility */
        :focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Prevent text selection on interactive elements */
        .header-btn,
        .nav-link,
        .mobile-nav-item,
        .story-item,
        .cat-card {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        /* Legacy class fixes for old templates */
        .primary-box {
            background: var(--color-white);
            border-radius: var(--radius);
            padding: 24px;
            margin-bottom: 24px;
        }

        .pb-left-column,
        .pb-right-column {
            float: none !important;
        }

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

        .product-name {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .info-orther {
            padding: 16px 0;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .product-price-group {
            padding: 20px 0;
        }

        .product-price-group .price {
            font-size: 32px;
            font-weight: 700;
            color: var(--color-gray-900);
        }

        .product-price-group .old-price {
            font-size: 18px;
            color: var(--color-gray-400);
            text-decoration: line-through;
            margin-right: 12px;
        }

        .form-action {
            padding: 20px 0;
        }

        .btn-add-cart {
            padding: 14px 28px;
            background: var(--color-primary);
            color: var(--color-white);
            border-radius: var(--radius);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
        }

        .btn-add-cart:hover {
            background: var(--color-accent);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .btn-add-cart i {
            font-size: 18px;
        }

        .product-tab {
            margin-top: 32px;
        }

        .nav-tab {
            display: flex;
            gap: 8px;
            border-bottom: 1px solid var(--color-gray-200);
            margin-bottom: 24px;
            list-style: none;
        }

        .nav-tab li a {
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--color-gray-600);
            border-bottom: 2px solid transparent;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .nav-tab li.active a,
        .nav-tab li a:hover {
            color: var(--color-accent);
            border-bottom-color: var(--color-accent);
        }

        .tab-panel {
            padding: 20px 0;
        }

        /* ========== MODERN PRODUCT DETAIL PAGE ========== */
        .modern-product-detail {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
            background: var(--color-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            margin-bottom: 32px;
        }

        .product-detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 48px;
            align-items: start;
        }

        /* Product Gallery Section */
        .product-gallery-section {
            position: sticky;
            top: 120px;
        }

        .gallery-main {
            display: block;
        }

        .main-image-container {
            position: relative;
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--color-gray-50);
            margin-bottom: 16px;
            aspect-ratio: 1;
        }

        .main-product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .main-product-image:hover {
            /* Zoom effect removed */
        }

        .product-badges {
            position: absolute;
            top: 16px;
            left: 16px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .product-badges .badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .image-thumbnails {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 4px 0;
        }

        .image-thumbnails img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: var(--radius-sm);
            border: 2px solid var(--color-gray-200);
            cursor: pointer;
            transition: var(--transition);
            flex-shrink: 0;
        }

        .image-thumbnails img:hover,
        .image-thumbnails img.active {
            border-color: var(--color-primary);
            transform: scale(1.05);
        }

        .mobile-gallery {
            display: none;
        }

        /* Product Info Section */
        .product-info-section {
            padding: 16px 0;
        }

        .product-header {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .product-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-gray-900);
            line-height: 1.2;
            margin-bottom: 16px;
        }

        .product-meta-info {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .meta-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .meta-label {
            font-weight: 600;
            color: var(--color-gray-600);
            min-width: 100px;
        }

        .meta-value {
            color: var(--color-gray-800);
        }

        .brand-link {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .brand-link:hover {
            color: var(--color-accent);
        }

        /* Price Section */
        .price-section {
            margin-bottom: 24px;
            padding: 20px;
            background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
            border-radius: var(--radius);
            border: 1px solid var(--color-gray-200);
        }

        .price-container {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .current-price {
            font-size: 32px;
            font-weight: 800;
            color: var(--color-primary);
            order: 1;
        }

        .old-price {
            font-size: 18px;
            color: var(--color-gray-400);
            text-decoration: line-through;
            order: 2;
        }

        .discount-badge {
            background: var(--color-accent);
            color: var(--color-white);
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            order: 3;
        }

        /* Stock & Info */
        .stock-info {
            margin-bottom: 20px;
            padding: 16px;
            background: var(--color-green-50);
            border: 1px solid var(--color-green-200);
            border-radius: var(--radius);
            color: var(--color-green-800);
            font-weight: 600;
        }

        /* Product Options */
        .product-options {
            margin-bottom: 24px;
        }

        .product-options select,
        .product-options input[type="text"],
        .product-options input[type="number"] {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius);
            font-size: 16px;
            transition: var(--transition);
            margin-bottom: 12px;
        }

        .product-options select:focus,
        .product-options input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
        }

        /* Product Features */
        .product-features {
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .product-features .feature-badge {
            background: var(--color-blue-50);
            color: var(--color-blue-700);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Add to Cart Section */
        .cart-section {
            margin-bottom: 24px;
            padding: 24px;
            background: var(--color-gray-50);
            border-radius: var(--radius);
            border: 2px solid var(--color-gray-200);
        }

        .quantity-selector {
            margin-bottom: 16px;
        }

        .quantity-selector select,
        .quantity-selector input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid var(--color-gray-300);
            border-radius: var(--radius);
            font-size: 16px;
            font-weight: 600;
        }

        .add-to-cart-button {
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
            color: var(--color-white);
            border: none;
            border-radius: var(--radius);
            font-size: 18px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            cursor: pointer;
            transition: var(--transition);
        }

        .add-to-cart-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .add-to-cart-button:active {
            transform: translateY(0);
        }

        .add-to-cart-button i {
            font-size: 20px;
        }

        /* Delivery Info */
        .delivery-info {
            margin-bottom: 24px;
            padding: 16px;
            background: var(--color-orange-50);
            border: 1px solid var(--color-orange-200);
            border-radius: var(--radius);
            color: var(--color-orange-800);
        }

        /* User Actions */
        .user-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .user-actions a,
        .user-actions button {
            padding: 12px 20px;
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius);
            background: var(--color-white);
            color: var(--color-gray-700);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .user-actions a:hover,
        .user-actions button:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
            background: var(--color-blue-50);
        }

        /* Modern Product Tabs */
        .modern-product-tabs {
            max-width: 1200px;
            margin: 0 auto 32px;
            padding: 0 24px;
        }

        .tabs-container {
            background: var(--color-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .tab-navigation {
            display: flex;
            background: var(--color-gray-50);
            border-bottom: 1px solid var(--color-gray-200);
            overflow-x: auto;
        }

        .tab-button {
            padding: 16px 24px;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            color: var(--color-gray-600);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            min-width: fit-content;
        }

        .tab-button:hover {
            color: var(--color-primary);
            background: var(--color-white);
        }

        .tab-button.active {
            color: var(--color-primary);
            border-bottom-color: var(--color-primary);
            background: var(--color-white);
        }

        .tab-button i {
            font-size: 16px;
        }

        .tab-content-area {
            min-height: 300px;
        }

        .tab-content-panel {
            display: none;
            padding: 32px;
        }

        .tab-content-panel.active {
            display: block;
        }

        .tab-content-panel h3 {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 20px;
        }

        .content-wrapper {
            max-width: 800px;
        }

        .product-description {
            line-height: 1.6;
            color: var(--color-gray-700);
        }

        .product-description h4 {
            font-size: 18px;
            font-weight: 600;
            color: var(--color-gray-900);
            margin: 20px 0 12px;
        }

        .product-description ul {
            margin: 16px 0;
            padding-left: 20px;
        }

        .product-description li {
            margin-bottom: 8px;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .modern-product-detail {
                padding: 16px;
                margin: 0 16px 24px;
            }

            .product-detail-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .product-gallery-section {
                position: static;
            }

            .gallery-main {
                display: none;
            }

            .mobile-gallery {
                display: block;
            }

            .product-title {
                font-size: 22px;
            }

            .current-price {
                font-size: 28px;
            }

            .cart-section {
                padding: 20px;
            }

            .modern-product-tabs {
                padding: 0 16px;
            }

            .tab-content-panel {
                padding: 20px;
            }

            .tab-navigation {
                flex-wrap: wrap;
            }

            .tab-button {
                flex: 1;
                min-width: 120px;
                justify-content: center;
            }

            .price-container {
                justify-content: center;
                text-align: center;
            }

            .user-actions {
                justify-content: center;
            }

            .meta-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }

            .meta-label {
                min-width: auto;
            }
        }

        @media (max-width: 480px) {
            .tab-navigation {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            .tab-button {
                padding: 12px 16px;
                font-size: 14px;
            }

            .tab-button i {
                font-size: 14px;
            }
        }

        /* ========== MODERN RELATED PRODUCTS ========== */
        .modern-related-products {
            max-width: 1200px;
            margin: 32px auto 0;
            padding: 0 24px;
            background: transparent;
        }

        .modern-related-products .section-container {
            background: var(--color-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .modern-related-products .section-header {
            padding: 32px 32px 16px;
            text-align: center;
            background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50));
            border-bottom: 1px solid var(--color-gray-200);
        }

        .modern-related-products .section-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .modern-related-products .section-title i {
            color: var(--color-primary);
            font-size: 24px;
        }

        .modern-related-products .section-description {
            font-size: 16px;
            color: var(--color-gray-600);
            margin: 0;
            font-weight: 500;
        }

        .related-products-carousel {
            padding: 24px;
            position: relative;
        }

        .related-products-carousel .carousel-container {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius);
        }

        .related-products-carousel .carousel-navigation {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            z-index: 5;
            pointer-events: none;
            display: flex;
            justify-content: space-between;
            padding: 0 -12px;
            transform: translateY(-50%);
        }

        .related-products-carousel .carousel-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            background: var(--color-white);
            color: var(--color-gray-700);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow-md);
            pointer-events: auto;
            font-size: 16px;
            font-weight: 600;
            z-index: 10;
            opacity: 0.9;
        }

        .related-products-carousel .carousel-btn:hover {
            background: var(--color-primary);
            color: var(--color-white);
            transform: scale(1.05);
            opacity: 1;
            box-shadow: var(--shadow-lg);
        }

        .related-products-carousel .carousel-prev {
            margin-left: -12px;
        }

        .related-products-carousel .carousel-next {
            margin-right: -12px;
        }

        .related-products-carousel .products-scroll-wrapper {
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 8px 0;
            cursor: grab;
            user-select: none;
        }

        .related-products-carousel .products-scroll-wrapper.grabbing {
            cursor: grabbing;
        }

        .related-products-carousel .products-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

        .related-products-carousel .products-carousel-track {
            display: flex !important;
            gap: 20px;
            min-height: 320px;
            align-items: stretch;
            padding: 0 8px;
        }

        .related-products-carousel .ps-product-item {
            flex: 0 0 250px;
            list-style: none;
            background: var(--color-white);
            border-radius: var(--radius);
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid var(--color-gray-200);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .related-products-carousel .ps-product-item:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            border-color: var(--color-primary);
        }

        .related-products-carousel .product-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;
            background: transparent;
        }

        .related-products-carousel .left-block {
            position: relative;
            aspect-ratio: 1;
            flex-shrink: 0;
            background: var(--color-gray-50);
            border-radius: var(--radius) var(--radius) 0 0;
            overflow: hidden;
        }

        .related-products-carousel .left-block .imgLink {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .related-products-carousel .left-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .related-products-carousel .ps-product-item:hover .left-block img {
            /* Zoom effect removed */
        }

        .related-products-carousel .right-block {
            flex: 1;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            justify-content: space-between;
        }

        .related-products-carousel .product-name {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0 0 8px 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .related-products-carousel .product-name a {
            color: var(--color-gray-900);
            text-decoration: none;
            transition: var(--transition);
        }

        .related-products-carousel .product-name a:hover {
            color: var(--color-primary);
        }

        .related-products-carousel .content_price {
            margin-bottom: 12px;
        }

        .related-products-carousel .price {
            font-weight: 700;
            display: block;
        }

        .related-products-carousel .old-price {
            font-size: 12px;
            color: var(--color-gray-400);
            text-decoration: line-through;
            margin-bottom: 4px;
        }

        .related-products-carousel .product-price {
            font-size: 16px;
            color: var(--color-primary);
        }

        .related-products-carousel .add-to-cart-btn {
            width: 100%;
            padding: 10px 12px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: auto;
        }

        .related-products-carousel .add-to-cart-btn:hover {
            background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .related-products-carousel .buttons {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 3;
            opacity: 0;
            transform: translateX(10px);
            transition: var(--transition);
        }

        .related-products-carousel .ps-product-item:hover .buttons {
            opacity: 1;
            transform: translateX(0);
        }

        .related-products-carousel .buttons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: var(--color-white);
            color: var(--color-gray-600);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            text-decoration: none;
            font-size: 14px;
        }

        .related-products-carousel .buttons a:hover {
            background: var(--color-primary);
            color: var(--color-white);
            transform: scale(1.1);
        }

        .related-products-carousel .catalog-item-ribbons {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .modern-related-products {
                padding: 0 16px;
                margin-top: 24px;
            }

            .modern-related-products .section-header {
                padding: 24px 20px 12px;
            }

            .modern-related-products .section-title {
                font-size: 22px;
            }

            .modern-related-products .section-description {
                font-size: 14px;
            }

            .related-products-carousel {
                padding: 16px;
            }

            .related-products-carousel .ps-product-item {
                flex: 0 0 180px;
            }

            .related-products-carousel .carousel-btn {
                width: 40px;
                height: 40px;
                font-size: 14px;
            }

            .related-products-carousel .buttons {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @media (max-width: 480px) {
            .related-products-carousel .ps-product-item {
                flex: 0 0 150px;
            }

            .related-products-carousel .right-block {
                padding: 12px;
                gap: 6px;
            }

            .related-products-carousel .product-name {
                font-size: 13px;
            }

            .related-products-carousel .product-price {
                font-size: 14px;
            }

            .related-products-carousel .add-to-cart-btn {
                padding: 8px 10px;
                font-size: 12px;
            }
        }

        /* ========== MODERN CATEGORY PAGE ========== */
        .modern-category-page {
            background: var(--color-gray-50);
            min-height: 600px;
            padding: 24px 0;
        }

        /* Category Header */
        .category-header {
            background: var(--color-white);
            border-radius: var(--radius);
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: var(--shadow-sm);
        }

        .category-breadcrumb {
            margin-bottom: 16px;
        }

        .breadcrumb {
            background: var(--color-gray-50);
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            margin: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .breadcrumb-item+.breadcrumb-item:before {
            content: ">";
            color: var(--color-gray-400);
            margin-right: 8px;
        }

        .breadcrumb-item a {
            color: var(--color-primary);
            text-decoration: none;
            transition: var(--transition);
        }

        .breadcrumb-item a:hover {
            color: var(--color-accent);
        }

        .breadcrumb-item.active {
            color: var(--color-gray-600);
            font-weight: 600;
        }

        .category-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .category-title i {
            color: var(--color-primary);
            font-size: 28px;
        }

        /* Category Actions */
        .category-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--color-gray-200);
        }

        .view-controls {
            display: flex;
            gap: 8px;
        }

        .view-btn {
            padding: 10px 14px;
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            color: var(--color-gray-600);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .view-btn:hover,
        .view-btn.active {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
        }

        .sort-controls {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sort-select {
            padding: 10px 16px;
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            background: var(--color-white);
            color: var(--color-gray-700);
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
            min-width: 200px;
        }

        .sort-select:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
        }

        /* Category Content Layout */
        .modern-category-content {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 24px;
            align-items: start;
        }

        /* Category Sidebar */
        .category-sidebar {
            position: sticky;
            top: 120px;
        }

        .filter-section {
            background: var(--color-white);
            border-radius: var(--radius);
            padding: 20px;
            box-shadow: var(--shadow-sm);
        }

        .filter-section h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-section h3 i {
            color: var(--color-primary);
            font-size: 16px;
        }

        .filter-placeholder {
            padding: 20px;
            text-align: center;
            color: var(--color-gray-500);
            font-style: italic;
        }

        /* Category Main Content */
        .category-main {
            background: var(--color-white);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow-sm);
        }

        /* Modern Products Grid — kategori #products-container hariç (tek grid öğesi ilk sütuna sıkışmasın) */
        .modern-products-grid:not(#products-container) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 24px;
        }

        .modern-products-grid.list-view:not(#products-container) {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        /* Modern Products Grid Layout */
        .modern-products-grid:not(#products-container) {
            display: grid !important;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
            gap: 24px !important;
            padding: 24px 0 !important;
            min-height: 400px !important;
        }

        /* Grid responsive */
        @media (max-width: 1200px) {
            .modern-products-grid:not(#products-container) {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
                gap: 20px !important;
            }
        }

        @media (max-width: 768px) {
            .modern-products-grid:not(#products-container) {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
                gap: 24px !important;
                padding: 16px 0 !important;
            }
        }

        @media (max-width: 480px) {
            .modern-products-grid:not(#products-container) {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
                gap: 12px !important;
            }
        }

        /* List view - when toggled */
        .modern-products-grid.list-view {
            display: flex !important;
            flex-direction: column !important;
            gap: 24px !important;
        }

        .modern-products-grid.list-view .ps-product-item {
            max-width: none !important;
        }

        .modern-products-grid.list-view .product-container {
            flex-direction: row !important;
            gap: 20px !important;
        }

        .modern-products-grid.list-view .left-block {
            flex: 0 0 150px !important;
            aspect-ratio: 1 !important;
        }

        .modern-products-grid.list-view .right-block {
            flex: 1 !important;
        }

        /* Modern Product Card (for category pages) */
        .modern-products-grid .ps-product-item {
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius);
            padding: 16px;
            transition: var(--transition);
            display: block;
            height: 100%;
        }

        .modern-products-grid .ps-product-item:hover {
            border-color: var(--color-primary);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .modern-products-grid .product-container {
            display: flex;
            flex-direction: column;
            height: 100%;
            gap: 16px;
        }

        .modern-products-grid .left-block {
            position: relative;
            aspect-ratio: 1;
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--color-gray-50);
        }

        .modern-products-grid .left-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .modern-products-grid .left-block:hover img {
            /* Zoom effect removed */
        }

        .modern-products-grid .catalog-item-ribbons {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .modern-products-grid .buttons {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
        }

        .modern-products-grid .buttons a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--color-white);
            border-radius: 50%;
            color: var(--color-gray-600);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .modern-products-grid .buttons a:hover {
            background: var(--color-red-500);
            color: var(--color-white);
            transform: scale(1.1);
        }

        .modern-products-grid .right-block {
            display: flex;
            flex-direction: column;
            gap: 12px;
            flex: 1;
        }

        .modern-products-grid .product-name {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .modern-products-grid .product-name a {
            color: var(--color-gray-900);
            text-decoration: none;
            transition: var(--transition);
        }

        .modern-products-grid .product-name a:hover {
            color: var(--color-primary);
        }

        .modern-products-grid .content_price {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-top: auto;
        }

        .modern-products-grid .old-price {
            font-size: 14px;
            color: var(--color-gray-400);
            text-decoration: line-through;
        }

        .modern-products-grid .product-price {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-primary);
        }

        .modern-products-grid .add-to-cart-btn {
            width: 100%;
            padding: 12px 16px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
            color: var(--color-white);
            border: none;
            border-radius: var(--radius-sm);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .modern-products-grid .add-to-cart-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        /* List View Styles */
        .modern-products-grid.list-view .ps-product-item {
            padding: 20px;
        }

        .modern-products-grid.list-view .product-container {
            flex-direction: row;
            align-items: center;
        }

        .modern-products-grid.list-view .left-block {
            width: 150px;
            aspect-ratio: 1;
            flex-shrink: 0;
        }

        .modern-products-grid.list-view .right-block {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex: 1;
        }

        .modern-products-grid.list-view .product-name {
            flex: 1;
            -webkit-line-clamp: 1;
        }

        .modern-products-grid.list-view .content_price {
            flex-direction: row;
            align-items: center;
            gap: 12px;
            margin: 0;
        }

        .modern-products-grid.list-view .add-to-cart-btn {
            width: auto;
            min-width: 140px;
            flex-shrink: 0;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .modern-category-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .category-sidebar {
                position: static;
            }

            .category-actions {
                flex-direction: column;
                align-items: stretch;
                gap: 16px;
            }

            .sort-controls {
                justify-content: center;
            }

            .sort-select {
                min-width: 250px;
            }
        }

        @media (max-width: 768px) {
            .modern-category-page {
                padding: 16px 0;
            }

            .category-header {
                padding: 20px;
                margin-bottom: 20px;
            }

            .category-title {
                font-size: 24px;
                text-align: center;
            }

            .category-main {
                padding: 16px;
            }

            .modern-products-grid:not(#products-container) {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 16px;
            }

            .breadcrumb {
                padding: 10px 12px;
            }

            .breadcrumb-item {
                font-size: 13px;
            }

            .view-controls {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .modern-products-grid:not(#products-container) {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }

            .category-title {
                font-size: 20px;
                flex-direction: column;
                gap: 8px;
                text-align: center;
            }

            .breadcrumb {
                justify-content: center;
            }

            .modern-products-grid.list-view .product-container {
                flex-direction: column;
                text-align: center;
            }

            .modern-products-grid.list-view .left-block {
                width: 100%;
                max-width: 200px;
                margin: 0 auto;
            }

            .modern-products-grid.list-view .right-block {
                flex-direction: column;
                text-align: center;
                gap: 16px;
            }

            .modern-products-grid.list-view .content_price {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }
        }

        /* ========== PRODUCT DETAIL RESPONSIVE ========== */
        @media (max-width: 768px) {
            .compact-content .description-preview {
                max-height: 150px;
            }

            .expand-content-btn {
                padding: 10px 16px;
                font-size: 14px;
            }
        }

        /* Hide scrollbars */
        .product-carousel::-webkit-scrollbar,
        .flash-products::-webkit-scrollbar,
        .new-products::-webkit-scrollbar {
            display: none !important;
        }

        /* Hide scrollbars */
        .product-carousel::-webkit-scrollbar,
        .flash-products::-webkit-scrollbar,
        .new-products::-webkit-scrollbar {
            display: none !important;
        }

        /* ========== PRODUCT DETAIL RESPONSIVE ========== */
        @media (max-width: 768px) {
            .compact-content .description-preview {
                max-height: 150px;
            }

            .expand-content-btn {
                padding: 10px 16px;
                font-size: 14px;
            }
        }
    

        /* ========= MEGA MENU DROPDOWN ========== */
        .category-menu .has-submenu {
            position: relative;
        }

        .category-menu .has-submenu:hover .mega-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .mega-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100vw;
            max-width: 1200px;
            background: white;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            border-radius: 0 0 12px 12px;
            padding: 30px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-15px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .mega-dropdown-container {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
        }

        .mega-featured {
            padding: 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            color: white;
        }

        .mega-featured h3 {
            font-size: 20px;
            margin-bottom: 16px;
            color: white;
            font-weight: 700;
        }

        .mega-categories {
            padding: 0 16px;
        }

        .mega-categories h4 {
            font-size: 16px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }

        .mega-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .mega-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mega-col ul li {
            margin-bottom: 10px;
        }

        .mega-col ul li a {
            color: #555;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.2s;
            display: block;
            padding: 6px 12px;
            border-radius: 6px;
        }

        .mega-col ul li a:hover {
            color: #667eea;
            background: #f5f7ff;
            transform: translateX(6px);
        }

        /* ========== HOMEPAGE PRODUCT SECTION CUSTOMIZATIONS ========== */

        /* Remove ALL extra borders from product containers - CRITICAL FIX */
        .product-container {
            border: none !important;
            box-shadow: none !important;
        }

        /* Common Card Transitions - ONLY border on ps-product-item (kategori #products-container hariç — sabit 240px tek sütun yapar) */
        .modern-scroll-wrapper .ps-product-item,
        .modern-products-grid:not(#products-container) .ps-product-item {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            height: 100%;
            position: relative;
            overflow: hidden;
            min-width: 240px;
            max-width: 240px;
            margin-right: 8px;
            /* Ultra tight spacing */
        }

        /* Grid spacing - ULTRA TIGHT */
        .modern-products-grid:not(#products-container) {
            gap: 8px !important;
            padding: 8px 0 !important;
        }

        .modern-scroll-wrapper .ps-product-item:hover,
        .modern-products-grid:not(#products-container) .ps-product-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }

        /* 1. Flash Products (Red Theme) - Modern hover with gradient */
        .flash-products .ps-product-item {
            border-color: #fee2e2;
        }

        .flash-products .ps-product-item:hover {
            border-color: #ff3b30;
            background: linear-gradient(to bottom, #fff 0%, #fff5f5 100%);
        }

        .flash-products .add-to-cart-btn {
            background: linear-gradient(135deg, #ff3b30, #dc2626) !important;
            color: white !important;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
        }

        .flash-products .add-to-cart-btn:hover {
            background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4);
        }

        /* 2. New Arrivals (Blue Theme) - Modern hover with gradient */
        .new-products .ps-product-item {
            border-color: #dbeafe;
        }

        .new-products .ps-product-item:hover {
            border-color: #0071e3;
            background: linear-gradient(to bottom, #fff 0%, #f0f9ff 100%);
        }

        .new-products .add-to-cart-btn {
            background: linear-gradient(135deg, #0071e3, #1d4ed8) !important;
            color: white !important;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
        }

        .new-products .add-to-cart-btn:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 113, 227, 0.4);
        }

        /* 3. Recommended Products (Purple Theme) - Modern hover with gradient */
        .recommended-products .ps-product-item {
            border-color: #f3e8ff;
        }

        .recommended-products .ps-product-item:hover {
            border-color: #af52de;
            background: linear-gradient(to bottom, #fff 0%, #faf5ff 100%);
        }

        .recommended-products .add-to-cart-btn {
            background: linear-gradient(135deg, #af52de, #9333ea) !important;
            color: white !important;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(175, 82, 222, 0.2);
        }

        .recommended-products .add-to-cart-btn:hover {
            background: linear-gradient(135deg, #9333ea, #7e22ce) !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(175, 82, 222, 0.4);
        }

        /* Modern cart button styling */
        .ps-product-item .add-to-cart-btn {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .ps-product-item .add-to-cart-btn i {
            font-size: 16px;
        }

        /* Remove outer borders if any on section containers */
        .flash-products-section,
        .new-products-section,
        .modern-products-wrapper {
            border: none !important;
            box-shadow: none !important;
        }

        /* Ürün detay mobil: ilgili ürünler 2 sütun; legacy 180px flex üstüne */
        @media (max-width: 768px) {
            .page-product-detail .ps-tabs-toolbar .ps-trust-section.ps-trust-section--tabs-inline {
                display: none !important;
                margin: 0 !important;
                padding: 0 !important;
                height: 0 !important;
                overflow: hidden !important;
            }

            body.page-product-detail.pd-mobile .modern-related-products .related-products-carousel .products-scroll-wrapper > ul,
            body.page-product-detail.pd-mobile .modern-related-products .related-products-carousel .products-carousel-track {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 12px !important;
                width: 100% !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                list-style: none !important;
                flex-wrap: unset !important;
            }

            body.page-product-detail.pd-mobile .modern-related-products .related-products-carousel .ps-product-item {
                flex: none !important;
                width: 100% !important;
                max-width: none !important;
                min-width: 0 !important;
            }

            body.page-product-detail.pd-mobile .modern-related-products .product-carousel.owl-carousel .owl-stage-outer {
                overflow: visible !important;
            }

            body.page-product-detail.pd-mobile .modern-related-products .product-carousel.owl-carousel .owl-stage {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 10px !important;
                width: 100% !important;
                transform: none !important;
                margin: 0 !important;
                padding: 0 !important;
                left: auto !important;
            }

            body.page-product-detail.pd-mobile .modern-related-products .product-carousel.owl-carousel .owl-item {
                width: 100% !important;
                max-width: none !important;
                min-width: 0 !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-carousel--overlay {
                position: relative !important;
                display: block !important;
                width: 100% !important;
                padding: 0 8px 0 !important;
                margin-bottom: 0 !important;
                min-height: 0 !important;
                box-sizing: border-box !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip::before,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip::after {
                display: none !important;
                content: none !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-carousel--overlay .pd-ilgili-nav {
                position: absolute !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                z-index: 5 !important;
                width: 34px !important;
                height: 34px !important;
                border: 1px solid rgba(226, 232, 240, 0.95) !important;
                border-radius: 50% !important;
                background: rgba(255, 255, 255, 0.92) !important;
                backdrop-filter: blur(8px) !important;
                color: #0f172a !important;
                box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12) !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-carousel--overlay .pd-ilgili-nav--prev {
                left: 4px !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-carousel--overlay .pd-ilgili-nav--next {
                right: 4px !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-carousel--overlay .pd-ilgili-nav:disabled {
                opacity: 0.3 !important;
                pointer-events: none !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                min-height: 0 !important;
                box-sizing: border-box !important;
                padding-bottom: 0 !important;
                margin-bottom: 0 !important;
                overflow: hidden !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip ul.urunler,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip ul.product-list,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip > ul,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-inner > ul,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-inner ul.urunler,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-inner ul.product-list {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 8px !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                scroll-snap-type: x mandatory !important;
                scroll-padding-inline: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 6px 6px 0 !important;
                list-style: none !important;
                scrollbar-width: none !important;
                -ms-overflow-style: none !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip ul::-webkit-scrollbar,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-inner ul::-webkit-scrollbar {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip ul.urunler > li.ps-product-item,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip ul > li.ps-product-item,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-scroll-strip .ps-product-item,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-inner .ps-product-item {
                flex: 0 0 calc(50% - 4px) !important;
                min-width: calc(50% - 4px) !important;
                max-width: calc(50% - 4px) !important;
                width: calc(50% - 4px) !important;
                scroll-snap-align: start !important;
                box-sizing: border-box !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .left-block {
                position: relative !important;
                height: 0 !important;
                padding-top: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                overflow: hidden !important;
                background: #ffffff !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .img-container,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .left-block .imgLink {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: 100% !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .pd-ilgili-product-img,
            body.page-product-detail.pd-mobile .pd-ilgili-modern .product-container .left-block img {
                width: 100% !important;
                height: 100% !important;
                object-fit: cover !important;
                object-position: center !important;
                padding: 0 !important;
                margin: 0 !important;
                transform: none !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .product-container .right-block {
                padding: 8px 8px 6px !important;
                background: #ffffff !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .product-container {
                background: #ffffff !important;
            }

            body.page-product-detail.pd-mobile .pd-ilgili-modern .img-container {
                background: #ffffff !important;
            }

            body.page-product-detail.pd-mobile .ps-related-section:has(.modern-scroll-wrapper:not(:has(> li))) {
                display: none !important;
            }
        }

        /* Oklar tüm genişliklerde — temp.php (.page-product-detail …) ile biçimlenir */
        @media (min-width: 769px) {
            .pd-ilgili-modern .pd-ilgili-carousel {
                display: block !important;
            }
        }

        /* Yönetici: ürün kodu altında düzenle / stok / AF (urunDuzenleAdmin) */
        .ps-pd-admin-strip {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.65rem 0.9rem;
            margin-top: 0.85rem;
            margin-bottom: 0.35rem;
            padding: 0.75rem 1rem;
            min-height: 3rem;
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 0.625rem;
            font-size: 0.9375rem;
            line-height: 1.45;
            color: #e2e8f0;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ps-pd-admin-strip .fa {
            font-size: 1rem;
            opacity: 0.95;
        }

        .ps-pd-admin-strip__edit {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.5rem 0.9rem;
            min-height: 2.5rem;
            background: #16a34a;
            color: #fff !important;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 0.9375rem;
            text-decoration: none !important;
            transition: background 0.15s ease;
        }

        .ps-pd-admin-strip__edit:hover {
            background: #15803d;
            color: #fff !important;
        }

        .ps-pd-admin-strip__badge {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.45rem 0.7rem;
            min-height: 2.25rem;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 0.5rem;
            font-size: 0.9375rem;
        }

        .ps-pd-admin-strip__badge strong {
            color: #f8fafc;
            font-weight: 700;
        }

        .ps-pd-admin-strip__badge--af strong {
            color: #fde047;
        }

        .ps-mobile-below-gallery .ps-pd-admin-strip {
            margin-top: 0.75rem;
        }