/* Custom CSS for E-Commerce Marketplace */

/* Header Specific Styles */
.header-gradient {
    background: linear-gradient(135deg, #f27a1a 0%, #e56910 100%);
}

.logo-gradient {
    background: linear-gradient(135deg, #f27a1a 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Category Menu Animations */
.category-underline {
    position: relative;
    overflow: hidden;
}

.category-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #f27a1a, #e56910);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.category-underline:hover::after {
    width: 100%;
}

/* Search Bar Enhancements */
.search-focus {
    box-shadow: 0 0 0 3px rgba(242, 122, 26, 0.1);
    border-color: #f27a1a;
}

/* Mobile Menu Animations */
.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.2s ease-out;
}

/* Cart Badge Animation */
.cart-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Header Shadow on Scroll */
.header-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Footer Specific Styles */
.footer-section h3 {
    position: relative;
    padding-bottom: 8px;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #e36307;
    border-radius: 1px;
}

/* Social Media Icons */
.social-icon {
    position: relative;
    overflow: hidden;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(227, 99, 7, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
}

.social-icon:hover::before {
    width: 100%;
    height: 100%;
}

/* Advantages Section */
.advantage-card {
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 8px;
}

.advantage-card:hover {
    transform: translateY(-2px);
    background-color: rgba(243, 244, 246, 0.5);
}

.advantage-icon {
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    transform: scale(1.05);
}

.advantage-card:hover .advantage-icon img {
    filter: brightness(1.1);
}

.advantage-card h3 {
    transition: color 0.3s ease;
}

.advantage-card:hover h3 {
    color: #e36307;
}

/* Energy Slider Section */
.energy-slider {
    position: relative;
    overflow: hidden;
}

/* Slider Container and Slides - Alpine.js Compatible */
.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.slider-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Slider content - No transitions to prevent flickering */
.slide-content {
    position: relative;
}

/* Navigation buttons */
.slider-navigation-btn {
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slider-navigation-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.slider-navigation-btn:active {
    transform: scale(0.95);
}

/* Thumbnail styling */
.thumbnail-active {
    border-color: #f27a1a !important;
    box-shadow: 0 0 15px rgba(242, 122, 26, 0.6);
    transform: scale(1.05);
}

/* Content area fixed height to prevent jumping */
.energy-slider .slide-content {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Progress bar animation */
.energy-slider .progress-bar {
    transition: width 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Improved mobile dots */
.energy-slider .mobile-dots button {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.energy-slider .mobile-dots button.active {
    transform: scale(1.25);
    box-shadow: 0 0 8px rgba(242, 122, 26, 0.6);
}

/* Responsive adjustments for energy slider */
@media (max-width: 768px) {
    .energy-slider .grid {
        min-height: 450px;
    }

    .energy-slider h1 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .energy-slider p {
        font-size: 0.875rem;
    }

    .energy-slider .slide-content {
        min-height: 240px;
    }

    .slider-navigation-btn {
        padding: 8px;
    }

    .slider-navigation-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Smooth fade transitions for Alpine.js */
[x-cloak] {
    display: none !important;
}

/* Enhanced hover effects */
.energy-slider:hover .slider-navigation-btn {
    opacity: 1;
}

.slider-navigation-btn {
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

/* Auto-play pause indicator */
.energy-slider.paused::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 8px;
    height: 8px;
    background: rgba(242, 122, 26, 0.8);
    border-radius: 50%;
    z-index: 30;
}

/* Product Sliders */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-2px);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product Section Banners */
.banner-card {
    transition: transform 0.3s ease;
}

.banner-card:hover {
    transform: translateY(-2px);
}

/* Günün Fırsatları Banner Cards */
.banner-hover:hover img {
    transform: scale(1.1);
}

.banner-hover:hover {
    transform: scale(1.02);
}

/* Enhanced Product Cards */
.product-card {
    transition: all 0.3s ease;
    border: 1px solid #f3f4f6;
    background: white;
}

.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #e5e7eb;
}

.product-card .favorite-btn {
    transition: all 0.2s ease;
}

.product-card .favorite-btn:hover {
    transform: scale(1.1);
}

/* Product Card Compact Layout */
.product-card h3 {
    height: 36px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-card img {
    transition: transform 0.3s ease;
}

.product-card:hover img {
    transform: scale(1.02);
}

/* Certificate Images */
.certificate-img {
    filter: grayscale(20%) brightness(1.1) contrast(1.1);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

.certificate-img:hover {
    filter: grayscale(0%) brightness(1.2) contrast(1.2);
    transform: scale(1.08);
    border-color: #e36307;
    box-shadow: 0 4px 12px rgba(227, 99, 7, 0.2);
}

/* Back to Top Button */
.back-to-top {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Footer Background */
.footer-bg {
    background: linear-gradient(135deg, #fff4f0 0%, #fef2ed 100%);
}

/* WhatsApp Button */
.whatsapp-btn {
    position: relative;
    overflow: hidden;
}

.whatsapp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.whatsapp-btn:hover::before {
    left: 100%;
}

/* Support Section */
.support-section {
    background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);
    border-radius: 12px;
    border: 1px solid #e5e5e5;
}

/* Footer Links Animation */
.footer-link {
    position: relative;
    display: inline-block;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #e36307;
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

/* Utility Classes */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-through {
    text-decoration: line-through;
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transform: translate3d(0, -10px, 0);
    }

    70% {
        transform: translate3d(0, -5px, 0);
    }

    90% {
        transform: translate3d(0, -2px, 0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out;
}

.animate-bounce-soft {
    animation: bounce 2s infinite;
}

/* Custom Gradients */
.gradient-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
}

/* Product Card Hover Effects */
.product-card {
    transition: all 0.3s ease;
    transform-origin: center;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-card .product-image {
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

/* Campaign Box Hover Effects */
.campaign-box {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.campaign-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.campaign-box:hover::before {
    left: 100%;
}

/* Button Styles - No transitions */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg;
}

/* Loading Spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Dropdown Animations */
.dropdown-enter {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
}

.dropdown-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.2s ease;
}

.dropdown-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dropdown-exit-active {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: all 0.15s ease;
}

/* Search Bar Enhancements */
.search-input {
    transition: all 0.3s ease;
}

.search-input:focus {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Footer Links */
.footer-link {
    @apply text-gray-400 hover:text-white transition-colors duration-200;
}

.footer-link:hover {
    transform: translateX(2px);
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .campaign-box {
        margin-bottom: 1rem;
    }

    .product-card {
        margin-bottom: 1.5rem;
    }
}

/* Dark Mode Support (for future implementation) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a202c;
        --bg-secondary: #2d3748;
        --text-primary: #f7fafc;
        --text-secondary: #e2e8f0;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        color: black !important;
        background: white !important;
    }
}

/* Shop Page Mobile Skin */
@media (max-width: 768px) {

    /* Shop.php için CSS Variables */
    body.mobile-shop-skin {
        --s-16: 16px;
        --s-12: 12px;
        --s-20: 20px;
        --s-8: 8px;
        --s-24: 24px;
        --r-pill: 9999px;
        --r-lg: 12px;
        --r-md: 8px;
        --r-sm: 6px;
        --bg: #ffffff;
        --bg-soft: #F3F4F6;
        --text: #1f2937;
        --text-mute: #9CA3AF;
        --text-dim: #6B7280;
        --line: #e5e7eb;
        --brand: #f97316;
        --brand-soft: #fed7aa;
        --star: #f59e0b;
        --fs-xxl: 20px;
        --fs-xl: 17px;
        --fs-lg: 15px;
        --fs-md: 14px;
        --fs-sm: 12px;
        --fw-bold: 700;
        --fw-medium: 500;
        --fw-med: 500;
        --fw-reg: 400;
    }

    /* Shop.php için mobil skin görünürlüğü */
    body.mobile-shop-skin .mobile-skin {
        display: block !important;
    }

    /* Shop sayfasında masaüstü görünümünü tamamen gizle */
    body.mobile-shop-skin .max-w-7xl {
        display: none !important;
    }

    /* Shop sayfasında header'ı gizle - kapsamlı kurallar */
    body.mobile-shop-skin *[class*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin *[class*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin *[class*="navbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin *[class*="top-bar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin *[id*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin *[id*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin header:not(.mobile-header):not(.mobile-header-top),
    body.mobile-shop-skin .mobile-generic-topbar {
        display: none !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -1 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Shop sayfasında footer'ı gizle */
    body.mobile-shop-skin footer {
        display: none !important;
    }

    /* Mobil skin aktif değilse varsayılan davranış */
    .mobile-skin {
        display: none;
    }

    /* Shop sayfası mobil header stilleri */
    body.mobile-shop-skin .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: var(--bg, #ffffff);
        border-bottom: 1px solid var(--line);
    }

    body.mobile-shop-skin .mobile-header-top {
        height: 56px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body.mobile-shop-skin .mobile-logo img {
        max-height: 24px;
    }

    /* Shop sayfası mobil content */
    body.mobile-shop-skin .mobile-content {
        min-height: 100vh;
    }

    /* Shop sayfası bottom navigation görünürlüğü */
    body.mobile-shop-skin .mobile-bottom-nav {
        display: flex !important;
    }

    /* Mobile shop grid düzeltmeleri */
    body.mobile-shop-skin .mobile-skin div[style*="display: grid"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--s-12) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile shop grid items */
    body.mobile-shop-skin .mobile-skin div[style*="display: grid"]>div {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Mobile shop grid container */
    body.mobile-shop-skin .mobile-skin div[style*="padding: 0 var(--s-16)"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Mobile shop ürün kartı içeriği */
    body.mobile-shop-skin .mobile-skin div[style*="border-radius: var(--r-lg)"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile shop text overflow */
    body.mobile-shop-skin .mobile-skin h3 {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}

/* Solution Center Mobile Skin */
/* Çözüm merkezi sayfasında tüm olası header elementlerini gizle */
/* Bu kuralları mobile media query içine taşındı */

/* Bu kuralları mobile media query içine taşındı */

@media (max-width: 768px) {

    /* Solution Center için CSS Variables */
    body.mobile-solution-skin {
        --brand: #FF6A00;
        --brand-press: #E75F00;
        --brand-soft: #FFF3EB;
        --bg: #FFFFFF;
        --bg-soft: #F6F6F6;
        --line: #E9E9EC;
        --shadow: rgba(18, 18, 23, .06);
        --text: #111112;
        --text-dim: #5A5B63;
        --text-mute: #8E9099;
        --link: #3B82F6;
        --warning: #FF6A00;
        --r-sm: 8px;
        --r-md: 12px;
        --r-lg: 16px;
        --r-pill: 999px;
        --s-8: 8px;
        --s-12: 12px;
        --s-16: 16px;
        --s-20: 20px;
        --s-24: 24px;
        --fs-xxl: 22px;
        --fs-xl: 18px;
        --fs-lg: 16px;
        --fs-md: 14px;
        --fs-sm: 12px;
        --fw-bold: 700;
        --fw-med: 600;
        --fw-reg: 500;

        /* Body temizlikleri - sadece mobilde */
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
    }

    /* Solution center header gizleme kuralları - sadece mobilde */
    body.mobile-solution-skin *[class*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin *[class*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin *[class*="navbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin *[class*="top-bar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin *[id*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin *[id*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin header:not(.mobile-header):not(.mobile-header-top),
    body.mobile-solution-skin .mobile-generic-topbar {
        display: none !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -1 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Solution Center için mobil skin görünürlüğü */
    body.mobile-solution-skin .mobile-skin {
        display: block !important;
    }

    /* Solution sayfasında masaüstü görünümünü tamamen gizle */
    body.mobile-solution-skin .max-w-7xl {
        display: none !important;
    }

    /* Solution sayfasında standart header/topbar'ı gizle */
    body.mobile-solution-skin header,
    body.mobile-solution-skin .header,
    body.mobile-solution-skin .topbar,
    body.mobile-solution-skin .top-bar,
    body.mobile-solution-skin .mobile-generic-topbar,
    body.mobile-solution-skin nav[role="navigation"],
    body.mobile-solution-skin .navbar,
    body.mobile-solution-skin .navigation {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }

    /* Solution sayfasında footer'ı gizle */
    body.mobile-solution-skin footer {
        display: none !important;
    }

    /* Solution sayfası mobil header stilleri */
    body.mobile-solution-skin .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: var(--bg, #ffffff);
        border-bottom: 1px solid var(--line);
    }

    body.mobile-solution-skin .mobile-header-top {
        height: 56px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body.mobile-solution-skin .mobile-logo img {
        max-height: 24px;
    }

    /* Solution sayfası mobil content */
    body.mobile-solution-skin .mobile-content {
        min-height: calc(100vh - 136px);
        max-height: none;
        overflow: visible;
    }

    /* Solution sayfası bottom navigation görünürlüğü */
    body.mobile-solution-skin .mobile-bottom-nav {
        display: flex !important;
    }

    /* Category chips kaydırma stilleri */
    body.mobile-solution-skin .category-chips {
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
    }

    body.mobile-solution-skin .category-chips::-webkit-scrollbar {
        display: none;
    }

    /* Solution sayfası mobil accordion animasyonları */
    body.mobile-solution-skin .mobile-skin svg {
        transition: transform 0.2s ease;
    }

    body.mobile-solution-skin .mobile-skin button:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Cart Mobile Skin - Only applies to mobile */

@media (max-width: 768px) {

    /* Cart için CSS Variables */
    body.mobile-cart-skin {
        --brand: #FF6A00;
        --brand-press: #E75F00;
        --brand-soft: #FFF3EB;
        --bg: #FFFFFF;
        --bg-soft: #F6F6F6;
        --line: #E9E9EC;
        --shadow: rgba(18, 18, 23, .06);
        --text: #111112;
        --text-dim: #5A5B63;
        --text-mute: #8E9099;
        --success: #25A773;
        --info: #7C3AED;
        --r-sm: 8px;
        --r-md: 12px;
        --r-lg: 16px;
        --r-pill: 999px;
        --s-8: 8px;
        --s-12: 12px;
        --s-16: 16px;
        --s-20: 20px;
        --s-24: 24px;
        --fs-xxl: 22px;
        --fs-xl: 18px;
        --fs-lg: 16px;
        --fs-md: 14px;
        --fs-sm: 12px;
        --fw-bold: 700;
        --fw-med: 600;
        --fw-reg: 500;

        /* Body temizlikleri - sadece mobilde */
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
    }

    /* Cart header gizleme kuralları - sadece mobilde */
    body.mobile-cart-skin *[class*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin *[class*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin *[class*="navbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin *[class*="top-bar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin *[id*="header"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin *[id*="topbar"]:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin header:not(.mobile-header):not(.mobile-header-top),
    body.mobile-cart-skin .mobile-generic-topbar {
        display: none !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -1 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Cart için mobil skin görünürlüğü */
    body.mobile-cart-skin .mobile-skin {
        display: block !important;
    }

    /* Cart sayfasında masaüstü görünümünü tamamen gizle */
    body.mobile-cart-skin .max-w-6xl {
        display: none !important;
    }

    /* Cart sayfasında standart header/topbar'ı gizle */
    body.mobile-cart-skin header,
    body.mobile-cart-skin .header,
    body.mobile-cart-skin .topbar,
    body.mobile-cart-skin .top-bar,
    body.mobile-cart-skin .mobile-generic-topbar,
    body.mobile-cart-skin nav[role="navigation"],
    body.mobile-cart-skin .navbar,
    body.mobile-cart-skin .navigation {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }

    /* Cart sayfasında footer'ı gizle */
    body.mobile-cart-skin footer {
        display: none !important;
    }

    /* Cart sayfası mobil content */
    body.mobile-cart-skin .mobile-cart-content {
        min-height: calc(100vh - 128px);
        max-height: none;
        overflow: visible;
    }

    /* Cart sayfası bottom navigation görünürlüğü */
    body.mobile-cart-skin .mobile-bottom-nav {
        display: flex !important;
    }

    /* Mobile quantity buttons hover effects */
    body.mobile-cart-skin .mobile-quantity-btn:hover:not([disabled]) {
        background: var(--bg-soft) !important;
    }

    /* Mobile quantity buttons active state */
    body.mobile-cart-skin .mobile-quantity-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Checkout Mobile Skin - Only applies to mobile */

@media (max-width: 768px) {

    /* Checkout için body temizlikleri - sadece mobilde */
    body.mobile-checkout-skin {
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
    }

    /* Checkout header gizleme kuralları - sadece mobilde */
    body.mobile-checkout-skin *[class*="header"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin *[class*="topbar"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin *[class*="navbar"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin *[class*="top-bar"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin *[id*="header"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin *[id*="topbar"]:not(.mobile-checkout-header),
    body.mobile-checkout-skin header:not(.mobile-checkout-header),
    body.mobile-checkout-skin .mobile-generic-topbar,
    body.mobile-checkout-skin .header,
    body.mobile-checkout-skin .topbar,
    body.mobile-checkout-skin .top-bar,
    body.mobile-checkout-skin nav[role="navigation"],
    body.mobile-checkout-skin .navbar,
    body.mobile-checkout-skin .navigation {
        display: none !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        z-index: -1 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Desktop checkout header'ını gizle */
    body.mobile-checkout-skin .checkout-desktop-header {
        display: none !important;
    }

    /* Mobile checkout header'ını göster */
    body.mobile-checkout-skin .mobile-checkout-header {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Checkout content'in üst padding'ini azalt */
    body.mobile-checkout-skin .max-w-6xl {
        padding-top: 0 !important;
    }

    /* Checkout sayfasında footer'ı gizle */
    body.mobile-checkout-skin footer {
        display: none !important;
    }
}

/* Accessibility Enhancements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Simple Focus Styles - No dynamic CSS changes */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .campaign-box {
        border: 2px solid currentColor;
    }

    .product-card {
        border: 1px solid currentColor;
    }
}

/* ===========================================
   MOBİL TASARIM - Sadece ana sayfa mobil cihazlarda aktif
   =========================================== */
@media (max-width: 768px) {

    /* CSS Variables for mobile design */
    body.homepage-mobile {
        --s-16: 16px;
        --s-12: 12px;
        --s-20: 20px;
        --r-pill: 9999px;
        --r-lg: 12px;
        --r-md: 8px;
        --r-sm: 6px;
        --bg: #ffffff;
        --bg-soft: #F3F4F6;
        --text: #1f2937;
        --text-mute: #9CA3AF;
        --line: #e5e7eb;
        --brand: #f97316;
        --brand-soft: #fed7aa;
        --star: #f59e0b;
        --fs-xxl: 20px;
        --fs-xl: 17px;
        --fs-lg: 15px;
        --fs-md: 14px;
        --fw-bold: 700;
        --fw-medium: 500;
        --e-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    /* Mobile Wrapper - Tüm mobil tasarım bu wrapper içinde */
    .mobile-skin {
        display: block !important;
    }

    /* Desktop header'ı gizle - yalnızca mobil skini olan sayfalarda */
    body.homepage-mobile header,
    body.product-detail-mobile header,
    body.account-page-mobile header {
        display: none !important;
    }

    /* Mobil Header */
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg, #ffffff);
        border-bottom: 1px solid var(--line);
    }

    /* Üst Bar */
    .mobile-header-top {
        height: 56px;
        padding: 0 var(--s-16);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Ana sayfa için özel header düzeni */
    .mobile-skin .mobile-header-top {
        gap: 8px;
    }

    .mobile-skin .mobile-header-top>* {
        flex-shrink: 0;
    }

    .mobile-skin .mobile-logo {
        margin-right: auto;
    }

    /* Logo */
    .mobile-logo img {
        max-height: 24px;
        width: auto;
    }

    .mobile-logo {
        display: flex;
        align-items: center;
    }

    /* Destek Merkezi Butonu */
    .mobile-support-btn {
        height: 32px;
        padding: 0 12px;
        border: 1px solid #E9ECEF;
        border-radius: 16px;
        color: #6C757D;
        background: white;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        white-space: nowrap;
    }

    .mobile-support-btn:hover,
    .mobile-support-btn:active {
        background: #F8F9FA;
        border-color: #DEE2E6;
        color: #495057;
    }

    /* Arama Çubuğu */
    .mobile-search-container {
        padding: var(--s-12) var(--s-16) var(--s-16) var(--s-16);
    }

    .mobile-search-input {
        width: 100%;
        height: 48px;
        background: #F8F9FA;
        border: 1px solid #E9ECEF;
        border-radius: var(--r-pill);
        padding-left: 48px;
        padding-right: var(--s-12);
        font-size: var(--fs-md);
        color: var(--text);
        outline: none;
        transition: all 0.2s ease;
    }

    .mobile-search-input:focus {
        border-color: var(--brand);
        background: white;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    }

    .mobile-search-input::placeholder {
        color: #ADB5BD;
        font-size: 15px;
    }

    /* Arama Butonu (Input Görünümlü) - Eski tanım kaldırıldı - flex layout kullanılıyor */

    /* mobile-search-icon - Eski absolute tanım kaldırıldı - flex layout kullanılıyor */

    /* Hero Banner/Slider - Simple Mobile Carousel */
    .mobile-hero {
        height: 180px;
        margin: 0 var(--s-16) var(--s-20) var(--s-16);
        position: relative;
        overflow: hidden;
        border-radius: var(--r-lg);
        background: var(--bg-soft);
    }

    .mobile-hero-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        touch-action: pan-x;
        /* Yatay kaydırma için */
    }

    .mobile-hero-slider {
        display: flex;
        height: 100%;
        transition: transform 0.4s ease;
        will-change: transform;
    }

    .mobile-hero-slide-wrapper {
        flex: none;
        width: 100%;
        /* Her slide tam genişlik */
        height: 100%;
        position: relative;
        flex-shrink: 0;
    }

    .mobile-hero-slide {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Navigation Arrow */
    .mobile-hero-nav {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        z-index: 10;
        transition: all 0.2s ease;
    }

    .mobile-hero-nav:active {
        transform: translateY(-50%) scale(0.95);
    }

    .mobile-hero-nav svg {
        width: 20px;
        height: 20px;
        color: #374151;
    }

    /* Indicators */
    .mobile-hero-indicators {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
    }

    .mobile-hero-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .mobile-hero-dot.active {
        background: var(--brand);
        transform: scale(1.2);
    }



    /* Bölüm Başlıkları */
    .mobile-section-title {
        font-size: var(--fs-xxl);
        font-weight: var(--fw-bold);
        color: var(--text);
        margin-top: var(--s-20);
        margin-bottom: var(--s-12);
        padding: 0 var(--s-16);
    }

    /* Son İncelediklerim - Yatay Scroll */
    .mobile-products-horizontal {
        padding-left: var(--s-16);
        margin-bottom: var(--s-20);
    }

    .mobile-products-scroll {
        display: flex;
        gap: var(--s-12);
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-products-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Ürün Kartı */
    .mobile-product-card {
        flex: none;
        width: 230px;
        background: var(--bg, #ffffff);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--s-12);
        box-shadow: none;
        transition: box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
        min-height: 300px;
        /* Sabit minimum yükseklik */
    }

    .mobile-product-card:hover {
        box-shadow: var(--e-card);
    }

    .mobile-product-image {
        width: 100%;
        aspect-ratio: 1;
        background: #FAFAFB;
        border-radius: var(--r-sm);
        overflow: hidden;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-product-name {
        font-size: var(--fs-lg);
        font-weight: var(--fw-medium);
        color: var(--text);
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-shrink: 0;
        /* Sabit yükseklik */
    }

    .mobile-product-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
    }

    .mobile-product-stars {
        display: flex;
        gap: 1px;
    }

    .mobile-product-star {
        width: 14px;
        height: 14px;
        color: var(--star);
    }

    .mobile-product-rating-text {
        font-size: 12px;
        color: var(--text-mute);
    }

    .mobile-product-price-container {
        margin-bottom: 8px;
        margin-top: auto;
        /* Butonları alta itmek için */
    }

    .mobile-product-original-price {
        font-size: 12px;
        color: var(--text-mute);
        text-decoration: line-through;
        margin-bottom: 2px;
    }

    .mobile-product-price {
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        color: var(--text);
    }

    .mobile-product-btn {
        width: 100%;
        height: 36px;
        border: 1px solid var(--brand);
        border-radius: var(--r-pill);
        background: transparent;
        color: var(--brand);
        font-size: var(--fs-md);
        font-weight: var(--fw-medium);
        transition: background-color 0.2s ease;
    }

    .mobile-product-btn:active {
        background: var(--brand-soft);
    }

    /* Sizin için seçtiklerimiz - 2 Kolon Grid */
    .mobile-products-grid {
        padding: 0 var(--s-16);
        margin-bottom: var(--s-20);
    }

    .mobile-grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--s-12);
    }

    .mobile-grid-card {
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--s-12);
        box-shadow: none;
        transition: box-shadow 0.2s ease;
        display: flex;
        flex-direction: column;
        min-height: 280px;
        /* Grid kartları için biraz daha küçük */
    }

    .mobile-grid-card:hover {
        box-shadow: var(--e-card);
    }

    /* Alt Navigasyon - Fixed Tab Bar - Sadece mobilde görünür */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--bg);
        border-top: 1px solid var(--line);
        display: none;
        /* Varsayılan olarak gizli */
        align-items: center;
        justify-content: space-around;
        z-index: 60;
        padding: 8px 0;
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Sadece mobilde görünür yap */
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            display: flex !important;
        }
    }

    /* Bottom background overlay to prevent content from showing behind nav */
    .mobile-bottom-bg {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        /* nav + shadow alanı */
        background: var(--bg);
        z-index: 55;
        /* nav'ın hemen altında */
        pointer-events: none;
        /* tıklamaları engelleme */
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: #9CA3AF;
        transition: color 0.2s ease;
        position: relative;
        text-decoration: none;
        min-height: 48px;
        min-width: 48px;
        padding: 4px 8px;
    }

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

    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
        stroke-width: 1.5;
    }

    .mobile-nav-label {
        font-size: 11px;
        font-weight: 500;
        line-height: 1;
        margin-top: 2px;
    }

    .mobile-nav-badge {
        position: absolute;
        top: 2px;
        right: 10px;
        background: var(--brand);
        color: white;
        min-width: 16px;
        height: 16px;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
    }

    /* Body padding bottom alt navigasyon için - sadece mobil alt bar olan sayfalar */
    body.homepage-mobile,
    body.product-detail-mobile,
    body.has-mobile-bottom-nav {
        padding-bottom: 80px;
        /* Bottom nav arkasına içerik girmesin */
    }

    /* Desktop header'ı gizle - yalnızca mobil skinli sayfalarda */
    body.homepage-mobile header,
    body.product-detail-mobile header {
        display: none !important;
    }

    /* Desktop ana sayfasını gizle - sadece mobile-skin içindeki içerik görünsün (yalnızca ana sayfa) */
    body.homepage-mobile .bg-gray-50.py-8:not(.mobile-content):not(.mobile-content *) {
        display: none !important;
    }

    /* Footer mobil uyumlu yapı - sadece homepage-mobile sayfalarda genişlet; diğer sayfalarda mevcut davranış korunur */
    body.homepage-mobile footer {
        display: block !important;
        margin-bottom: 64px;
        /* Bottom navigation için boşluk */
    }

    /* Advantages section mobil düzenlemesi */
    footer section:first-of-type .container .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    footer section:first-of-type .container .grid>div {
        padding: 16px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border-left: 4px solid var(--brand);
    }

    footer section:first-of-type .container .grid .flex {
        align-items: center !important;
        gap: 12px !important;
    }

    footer section:first-of-type .container .grid img {
        width: 48px !important;
        height: 48px !important;
    }

    footer section:first-of-type .container .grid h3 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
        color: var(--brand) !important;
    }

    footer section:first-of-type .container .grid p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #6B7280 !important;
    }

    /* Main footer content mobil düzenlemesi */
    footer .bg-orange-50 {
        padding: 24px 0 !important;
    }

    footer .bg-orange-50 .container {
        padding: 0 16px !important;
    }

    footer .bg-orange-50 .container .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    footer .bg-orange-50 h3 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
        font-weight: 600 !important;
    }

    footer .bg-orange-50 .space-y-2 {
        gap: 8px !important;
    }

    footer .bg-orange-50 .space-y-2 li {
        margin: 6px 0 !important;
    }

    footer .bg-orange-50 .space-y-2 a {
        font-size: 13px !important;
        line-height: 1.4 !important;
        display: block;
        padding: 2px 0;
    }

    /* Sosyal medya linkleri */
    footer .space-y-3 a {
        font-size: 12px !important;
        padding: 4px 0;
    }

    footer .space-y-3 .w-8 {
        width: 28px !important;
        height: 28px !important;
    }

    /* Newsletter section mobil */
    footer .space-y-4 {
        margin-top: 16px !important;
        grid-column: 1 / -1 !important;
        /* Full width on mobile */
    }

    footer .space-y-4>* {
        margin: 8px 0 !important;
    }

    footer .space-y-4 h3 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    footer .space-y-4 p {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }

    footer .flex.space-x-2 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    footer input[type="email"] {
        font-size: 14px !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    footer button {
        font-size: 13px !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        width: 100% !important;
    }

    /* Sertifikalar/trust badges mobil */
    footer .flex.flex-wrap {
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    footer .certificate-img {
        width: 50px !important;
        height: auto !important;
        margin: 2px !important;
    }

    /* Copyright section mobil */
    footer .border-t {
        padding: 20px 16px !important;
        text-align: center !important;
    }

    footer .border-t .container {
        padding: 0 !important;
    }

    footer .border-t .flex {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    footer .border-t p,
    footer .border-t a {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* WhatsApp button mobil */
    footer .whatsapp-btn {
        display: none !important;
        /* Mobilde bottom nav var */
    }

    /* General container padding for footer */
    footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Back to top button - mobilde gizle */
    footer .fixed.bottom-6.right-6 {
        display: none !important;
    }

    /* Mobil Arama Sayfası Tasarımı */
    .mobile-search-skin {
        display: block !important;
        min-height: 100vh;
        background: white;
        padding-bottom: 0;
        /* Bottom navigation kaldırıldı */
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* CSS variables for mobile search */
    .mobile-search-skin {
        --text: #1F2937;
        --text-mute: #9CA3AF;
        --brand: #ea580c;
        --brand-soft: #FEF3F2;
        --star: #FCD34D;
        --bg: white;
        --bg-soft: #F9FAFB;
        --line: #E5E7EB;
        --r-pill: 25px;
        --r-md: 8px;
        --r-lg: 12px;
        --s-12: 12px;
        --s-16: 16px;
        --s-20: 20px;
        --s-24: 24px;
        --fs-md: 14px;
        --fs-lg: 16px;
        --fs-xl: 18px;
        --fs-xxl: 20px;
        --fw-medium: 500;
        --fw-bold: 600;
    }

    .desktop-search-content {
        display: none !important;
    }

    /* Mobil Arama Header */
    .mobile-search-header {
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .mobile-search-header-top {
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 var(--s-16);
        gap: var(--s-12);
        background: white;
    }

    /* Geri Butonu */
    .mobile-search-back-btn {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        color: #6B7280;
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-search-back-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Arama Input Container */
    .mobile-search-input-container {
        flex: 1;
        position: relative;
    }

    .mobile-search-form {
        position: relative;
        width: 100%;
    }

    .mobile-search-input-field {
        width: 100%;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        padding: 0 var(--s-16);
        background: var(--bg);
        font-size: 16px;
        color: var(--text);
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .mobile-search-input-field::placeholder {
        color: var(--text-mute);
    }

    .mobile-search-input-field:focus {
        outline: 1.5px solid var(--brand);
        box-shadow: none;
        border-color: var(--brand);
    }

    /* Search icon kaldırıldı */



    /* Mobil Arama İçerik */
    .mobile-search-content {
        padding: var(--s-16);
        min-height: calc(100vh - 56px);
        /* Sadece header hariç, bottom nav kaldırıldı */
    }

    /* Boş Arama Durumu */
    .mobile-search-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 60px 20px;
        min-height: 300px;
        position: relative;
    }

    /* Empty state gizli durumu */
    .mobile-search-empty-state.hidden {
        display: none !important;
    }

    .mobile-search-empty-icon {
        width: 64px;
        height: 64px;
        color: #B0B0B0;
        margin: 0 auto 24px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
    }

    .mobile-search-empty-icon svg {
        width: 64px;
        height: 64px;
        display: block;
        margin: 0 auto;
    }

    .mobile-search-empty-text {
        font-size: 16px;
        color: var(--text);
        margin-bottom: var(--s-12);
        line-height: 1.5;
    }

    /* Masaüstü bilgi mesajı */
    .mobile-search-desktop-info {
        font-size: 14px;
        color: var(--text-mute);
        margin-top: var(--s-12);
        padding: var(--s-12) var(--s-16);
        background: var(--bg-soft);
        border-radius: var(--r-md);
        border-left: 3px solid var(--brand);
        line-height: 1.4;
    }



    /* Arama Sonuçları */
    .mobile-search-results-header {
        margin-bottom: var(--s-20);
    }

    .mobile-search-results-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 4px;
    }

    .mobile-search-results-count {
        font-size: 14px;
        color: var(--text-mute);
    }

    /* Ürün Grid */
    .mobile-search-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-12);
        margin-bottom: var(--s-20);
    }

    /* Son Gezdikleriniz */
    .mobile-search-recent-section {
        margin-top: var(--s-24);
    }

    .mobile-search-section-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: var(--s-12);
    }

    .mobile-search-recent-products {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-12);
    }

    /* Ürün Kartları */
    .mobile-search-product-card,
    .mobile-search-recent-card {
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--s-12);
        background: var(--bg);
        display: flex;
        flex-direction: column;
        min-height: 280px;
    }

    .mobile-search-product-image-container {
        width: 100%;
        aspect-ratio: 1;
        background: #FAFAFB;
        border-radius: var(--r-md);
        overflow: hidden;
        margin-bottom: 8px;
    }

    .mobile-search-product-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-search-product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .mobile-search-product-title {
        font-size: 14px;
        color: var(--text);
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-shrink: 0;
        height: 36px;
        /* 2 satır için sabit yükseklik */
    }

    .mobile-search-product-title a {
        color: inherit;
        text-decoration: none;
    }

    .mobile-search-product-title a:hover {
        color: var(--brand);
    }

    /* Rating */
    .mobile-search-product-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .mobile-search-product-stars {
        display: flex;
        gap: 1px;
    }

    .mobile-search-product-star {
        width: 14px;
        height: 14px;
        color: #D1D5DB;
    }

    .mobile-search-product-star-filled {
        color: var(--star);
        fill: currentColor;
    }

    .mobile-search-product-rating-text {
        font-size: 12px;
        color: var(--text-mute);
    }

    /* Fiyat */
    .mobile-search-product-price {
        margin-bottom: 8px;
        margin-top: auto;
        /* Butonları alta itmek için */
        flex-shrink: 0;
    }

    .mobile-search-product-original-price {
        font-size: 12px;
        color: var(--text-mute);
        text-decoration: line-through;
        display: block;
        margin-bottom: 2px;
    }

    .mobile-search-product-current-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
    }

    /* Sepete Ekle Butonu */
    .mobile-search-product-btn {
        height: 36px;
        border: 1px solid #C0C0C0;
        border-radius: var(--r-pill);
        background: var(--bg);
        color: var(--text);
        font-size: 14px;
        font-weight: 500;
        margin-top: auto;
        flex-shrink: 0;
    }

    .mobile-search-product-btn:hover,
    .mobile-search-product-btn:active {
        background: var(--bg-soft);
    }

    /* Sonuç Bulunamadı */
    .mobile-search-no-results {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 60px 20px;
        min-height: 200px;
    }

    /* AJAX Arama Sonuçları */
    .mobile-search-results {
        margin-bottom: var(--s-20);
    }

    .mobile-search-results-list {
        margin-bottom: var(--s-16);
    }

    .mobile-search-result-item {
        border-bottom: 1px solid var(--line);
        padding: var(--s-12) 0;
    }

    .mobile-search-result-item:last-child {
        border-bottom: none;
    }

    .mobile-search-result-link {
        display: flex;
        align-items: center;
        gap: var(--s-12);
        text-decoration: none;
        color: inherit;
    }

    .mobile-search-result-link:hover {
        background: var(--bg-soft);
        border-radius: var(--r-md);
        padding: 8px;
        margin: -8px;
    }

    .mobile-search-result-image {
        width: 60px;
        height: 60px;
        background: #FAFAFB;
        border-radius: var(--r-md);
        overflow: hidden;
        flex-shrink: 0;
    }

    .mobile-search-result-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-search-result-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-search-result-name {
        font-size: 14px;
        color: var(--text);
        line-height: 1.3;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-search-result-price {
        font-size: 16px;
        font-weight: 700;
        color: #ea580c;
    }

    /* Tümünü Göster Butonu */
    .mobile-search-show-all {
        text-align: center;
        margin-top: var(--s-16);
    }

    .mobile-search-show-all-btn {
        display: inline-block;
        padding: var(--s-12) var(--s-24);
        background: var(--brand);
        color: white;
        text-decoration: none;
        border-radius: var(--r-pill);
        font-size: 14px;
        font-weight: 500;
    }

    .mobile-search-show-all-btn:hover,
    .mobile-search-show-all-btn:active {
        background: #d97706;
    }

    /* Son İncelenen Ürünler (Liste Formatı) */
    .mobile-search-recent-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-search-recent-item {
        border-bottom: 1px solid var(--line);
        padding: var(--s-12) 0;
    }

    .mobile-search-recent-item:last-child {
        border-bottom: none;
    }

    .mobile-search-recent-link {
        display: flex;
        align-items: center;
        gap: var(--s-12);
        text-decoration: none;
        color: inherit;
    }

    .mobile-search-recent-link:hover {
        background: var(--bg-soft);
        border-radius: var(--r-md);
        padding: 8px;
        margin: -8px;
    }

    .mobile-search-recent-image {
        width: 50px;
        height: 50px;
        background: #FAFAFB;
        border-radius: var(--r-md);
        overflow: hidden;
        flex-shrink: 0;
    }

    .mobile-search-recent-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-search-recent-info {
        flex: 1;
        min-width: 0;
    }

    .mobile-search-recent-name {
        font-size: 14px;
        color: var(--text);
        line-height: 1.3;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-search-recent-price {
        font-size: 14px;
        font-weight: 600;
        color: #ea580c;
    }

    /* Loading ve Error States */
    .mobile-search-loading,
    .mobile-search-error {
        text-align: center;
        padding: var(--s-20);
        color: var(--text-mute);
        font-size: 14px;
    }

    .mobile-search-error {
        color: #ef4444;
    }
}

/* Ana sayfa mobil tasarım düzenlemeleri */
@media (max-width: 768px) {

    /* Mobile body düzenlemeleri - sadece ana sayfa */
    body.homepage-mobile {
        background: #ffffff !important;
        padding-bottom: 64px !important;
    }

    /* Mobile skin'i aktif et - sadece ana sayfa */
    body.homepage-mobile .mobile-skin {
        display: block !important;
    }

    /* Desktop içeriği tamamen gizle - sadece ana sayfa */
    body.homepage-mobile .bg-gray-50.py-8 {
        display: none !important;
    }

    /* Ana container'ları gizle - sadece ana sayfa */
    body.homepage-mobile main>div:not(.mobile-skin) {
        display: none !important;
    }
}

/* ===== ÜRÜN DETAY MOBİL TASARIM ===== */

/* Mobile product skin - varsayılan gizli */
.mobile-product-skin {
    display: none;
}

@media (max-width: 768px) {

    /* CSS Variables for mobile product design */
    body.product-detail-mobile {
        --s-16: 16px;
        --s-12: 12px;
        --s-20: 20px;
        --r-pill: 9999px;
        --r-lg: 12px;
        --r-md: 8px;
        --r-sm: 6px;
        --bg: #ffffff;
        --bg-soft: #F3F4F6;
        --text: #1f2937;
        --text-mute: #9CA3AF;
        --line: #e5e7eb;
        --brand: #f97316;
        --brand-soft: #fed7aa;
        --star: #f59e0b;
        --fs-xxl: 20px;
        --fs-xl: 17px;
        --fs-lg: 15px;
        --fs-md: 14px;
        --fw-bold: 700;
        --fw-medium: 500;
        --fw-bold: 600;

        background: #ffffff !important;
        padding-bottom: 80px !important;
        /* Fixed bottom bar için */
        width: 100vw !important;
        /* 100% yerine 100vw kullan */
        max-width: 100vw !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Desktop ürün detay içeriğini gizle */
    body.product-detail-mobile .desktop-product-wrapper {
        display: none !important;
    }

    /* Desktop header ve footer'ı gizle */
    body.product-detail-mobile header,
    body.product-detail-mobile footer {
        display: none !important;
    }

    /* Desktop Önerilen Ürünler ve Benzer Ürünler bölümlerini gizle */
    body.product-detail-mobile .desktop-recommended-products,
    body.product-detail-mobile .desktop-similar-products {
        display: none !important;
    }

    /* Mobil ürün detay skin'i göster */
    body.product-detail-mobile .mobile-product-skin {
        display: block !important;
        min-height: 100vh;
        width: 100% !important;
        max-width: 100% !important;
        background: white;
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }

    /* Mobile Header */
    .mobile-product-header {
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        z-index: 40;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-product-header-top {
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--s-16);
        background: white;
    }

    .mobile-product-logo {
        display: flex;
        align-items: center;
    }

    .mobile-product-logo-img {
        max-height: 24px;
        width: auto;
    }

    .mobile-product-logo-text {
        color: var(--brand);
        font-weight: var(--fw-bold);
        font-size: 18px;
    }

    .mobile-product-header-icons {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-product-search-btn,
    .mobile-product-cart-btn {
        width: 40px;
        height: 40px;
        color: var(--text);
        border: none;
        background: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: background-color 0.2s;
        position: relative;
    }

    .mobile-product-search-btn:hover,
    .mobile-product-cart-btn:hover {
        background: var(--bg-soft);
    }

    .mobile-product-search-btn svg,
    .mobile-product-cart-btn svg {
        width: 24px;
        height: 24px;
    }

    .mobile-cart-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background: var(--brand);
        color: white;
        font-size: 10px;
        font-weight: 600;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    /* Mobile Product Content */
    .mobile-product-content {
        background: white;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-product-images {
        width: 100%;
        max-width: 100%;
        position: relative;
        aspect-ratio: 1 / 1;
        background: #FAFAFA;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .mobile-product-image-slider {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        transition: transform 0.3s ease;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .mobile-product-slide {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-product-slide.active {
        display: block;
        opacity: 1;
    }

    .mobile-product-image-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--s-16);
    }

    .mobile-product-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: var(--r-md);
    }

    /* Slide Indicators */
    .mobile-product-indicators {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }

    .mobile-product-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: #D1D5DB;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-product-indicator.active {
        background: var(--brand);
    }

    /* Product Info */
    .mobile-product-info {
        padding: var(--s-16);
        background: white;
    }

    /* Product Title */
    .mobile-product-title-section {
        margin-bottom: var(--s-16);
    }

    .mobile-product-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .mobile-product-installment-badge {
        display: inline-block;
        background: #F9F7FE;
        color: #7A3DD7;
        padding: 4px 8px;
        border-radius: 4px;
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-weight: 500;
        font-size: 11px;
        line-height: 1.2;
    }

    /* Rating Section */
    .mobile-product-rating-section {
        margin-bottom: var(--s-16);
    }

    .mobile-product-rating {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .mobile-product-stars {
        display: flex;
        gap: 2px;
    }

    .mobile-product-star {
        width: 14px;
        height: 14px;
        color: #D1D5DB;
    }

    .mobile-product-star.active {
        color: var(--star);
    }

    .mobile-product-rating-text {
        font-size: 14px;
        color: var(--text-mute);
    }

    .mobile-product-campaign {
        font-size: 12px;
        color: var(--brand);
        font-weight: 500;
    }

    /* Seller Info */
    .mobile-product-seller {
        margin-bottom: var(--s-16);
        padding-bottom: var(--s-16);
        border-bottom: 1px solid var(--line);
    }

    .mobile-product-seller-info {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .mobile-product-seller-label {
        font-size: 14px;
        color: var(--text);
    }

    .mobile-product-seller-link {
        font-size: 14px;
        color: var(--brand);
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-product-seller-actions {
        display: flex;
        gap: 8px;
    }

    .mobile-product-seller-btn {
        height: 28px;
        padding: 0 var(--s-12);
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: white;
        color: var(--text);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-product-seller-btn:hover {
        background: var(--bg-soft);
    }

    /* Color Selection / Variants */
    .mobile-product-variants {
        margin-bottom: var(--s-16);
        padding-bottom: var(--s-16);
        border-bottom: 1px solid var(--line);
    }

    .mobile-product-variant-group {
        margin-bottom: 16px;
    }

    .mobile-product-variant-group:last-child {
        margin-bottom: 0;
    }

    .mobile-product-variants-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
    }

    .mobile-product-color-options {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .mobile-product-color-btn {
        height: 36px;
        padding: 0 var(--s-12);
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        background: white;
        color: var(--text);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
    }

    .mobile-product-color-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
    }

    .mobile-product-color-btn.active {
        border-color: var(--brand);
        background: var(--brand);
        color: white;
    }

    .mobile-variant-display-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tab Navigation */
    .mobile-product-tabs {
        margin-bottom: var(--s-16);
    }

    .mobile-product-tab-buttons {
        display: flex;
        background: var(--bg-soft);
        border-radius: var(--r-md);
        padding: 4px;
        margin-bottom: var(--s-16);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 2px;
    }

    .mobile-product-tab-buttons::-webkit-scrollbar {
        display: none;
    }

    .mobile-product-tab-btn {
        flex: 0 0 auto;
        height: 40px;
        padding: 0 12px;
        border: none;
        background: transparent;
        color: var(--text);
        font-size: 12px;
        font-weight: 500;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .mobile-product-tab-btn.active {
        background: white;
        color: var(--brand);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border-bottom: 2px solid var(--brand);
    }

    /* Mobile Tab Section Titles */
    .mobile-tab-section-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 6px;
    }

    .mobile-tab-section-desc {
        font-size: 13px;
        color: var(--text-mute);
        line-height: 1.5;
        margin-bottom: 16px;
    }

    /* Mobile Installment Table */
    .mobile-installment-section {
        padding: 0;
    }

    .mobile-installment-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
    }

    .mobile-installment-table {
        width: 100%;
        min-width: 500px;
        border-collapse: collapse;
        font-size: 12px;
    }

    .mobile-installment-table thead tr {
        background: var(--bg-soft);
        border-bottom: 1px solid var(--line);
    }

    .mobile-installment-table th {
        padding: 10px 8px;
        font-weight: 600;
        color: var(--text);
        text-align: center;
        font-size: 11px;
        white-space: nowrap;
    }

    .mobile-installment-table th:first-child {
        text-align: left;
        padding-left: 12px;
    }

    .mobile-installment-table tbody tr {
        border-bottom: 1px solid var(--line);
    }

    .mobile-installment-table tbody tr:last-child {
        border-bottom: none;
    }

    .mobile-installment-bank {
        padding: 10px 8px 10px 12px;
        font-weight: 500;
        color: var(--text);
        white-space: nowrap;
    }

    .mobile-installment-cell {
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }

    .mobile-installment-total {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 2px;
    }

    .mobile-installment-price {
        font-size: 12px;
        font-weight: 600;
    }

    .mobile-installment-currency {
        font-size: 10px;
    }

    .mobile-installment-monthly {
        font-size: 10px;
        color: var(--text-mute);
    }

    .mobile-installment-monthly-price {
        font-size: 10px;
        color: var(--text-mute);
    }

    .mobile-installment-monthly-currency {
        font-size: 9px;
        color: var(--text-mute);
    }

    .mobile-installment-rate {
        font-size: 10px;
        color: var(--brand);
        font-weight: 500;
    }

    .mobile-installment-na {
        color: #D1D5DB;
        font-size: 12px;
    }

    .mobile-installment-empty {
        text-align: center;
        padding: 32px 16px;
        color: var(--text-mute);
        font-size: 14px;
    }

    .mobile-installment-empty-sub {
        font-size: 12px;
        margin-top: 4px;
    }

    /* Mobile Refund / Return Steps */
    .mobile-iade-section {
        padding: 0;
    }

    .mobile-iade-steps {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-iade-step {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: white;
    }

    .mobile-iade-step-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        background: #FFF7ED;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-iade-icon {
        width: 16px;
        height: 16px;
        color: var(--brand);
    }

    .mobile-iade-step-content {
        flex: 1;
        min-width: 0;
    }

    .mobile-iade-step-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 4px;
    }

    .mobile-iade-step-desc {
        font-size: 13px;
        color: var(--text-mute);
        line-height: 1.5;
    }

    .mobile-product-tab-content {
        min-height: 200px;
    }

    .mobile-product-tab-panel {
        display: none;
        padding: var(--s-12);
    }

    .mobile-product-tab-panel.active {
        display: block;
    }

    .mobile-product-description {
        color: var(--text);
        line-height: 1.6;
        font-size: 14px;
    }

    .mobile-product-description img {
        width: 100%;
        height: auto;
        border-radius: var(--r-md);
        margin: var(--s-12) 0;
    }

    /* Fixed Bottom Bar */
    .mobile-product-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--line);
        padding: var(--s-16);
        display: flex;
        align-items: center;
        gap: var(--s-16);
        z-index: 30;
    }

    .mobile-product-price-section {
        flex: 1;
    }

    .mobile-product-old-price {
        font-size: 12px;
        color: var(--text-mute);
        margin-bottom: 2px;
    }

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

    .mobile-product-current-price {
        margin-bottom: 4px;
    }

    .mobile-product-current-price-text {
        font-size: 18px;
        font-weight: 700;
        color: var(--text);
    }

    .mobile-product-discount-info {
        font-size: 12px;
        color: #16a34a;
        font-weight: 500;
    }

    .mobile-product-add-to-cart {
        height: 44px;
        padding: 0 var(--s-20);
        background: #FF580D;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 120px;
    }

    .mobile-product-add-to-cart:hover {
        background: #e5510c;
    }

    .mobile-product-add-to-cart:active {
        transform: scale(0.98);
    }

    .mobile-product-go-to-cart {
        height: 44px;
        padding: 0 var(--s-20);
        background: #2C671D;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 120px;
    }

    .mobile-product-go-to-cart:hover {
        background: #245a19;
    }

    .mobile-product-go-to-cart:active {
        transform: scale(0.98);
    }

    /* Mobile Product Actions (Bottom Bar) */
    .mobile-product-actions {
        display: flex;
        gap: var(--s-12);
        align-items: center;
    }

    .mobile-product-favorite-btn {
        width: 44px;
        height: 44px;
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--r-pill);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
    }

    .mobile-product-favorite-btn:hover {
        background: #FEF2F2;
        border-color: #F87171;
    }

    .mobile-product-favorite-btn.active {
        background: #FEF2F2;
        border-color: #EF4444;
    }

    .mobile-product-favorite-icon {
        width: 20px;
        height: 20px;
        color: #6B7280;
        transition: color 0.2s;
    }

    .mobile-product-favorite-btn:hover .mobile-product-favorite-icon,
    .mobile-product-favorite-btn.active .mobile-product-favorite-icon {
        color: #EF4444;
    }

    .mobile-product-favorite-btn.active .mobile-product-favorite-icon {
        fill: #EF4444;
        stroke: #EF4444;
    }

    /* Update Add to Cart button for new layout */
    .mobile-product-add-to-cart {
        flex: 1;
        height: 44px;
        background: #FF580D;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .mobile-product-go-to-cart {
        flex: 1;
        height: 44px;
        background: #2C671D;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    /* Reviews & Q&A Styles */
    .mobile-review-item {
        padding: var(--s-12);
        border-bottom: 1px solid var(--line);
        margin-bottom: var(--s-12);
    }

    .mobile-review-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .mobile-review-author {
        font-weight: 500;
        font-size: 14px;
        color: var(--text);
    }

    .mobile-review-rating {
        display: flex;
        gap: 2px;
    }

    .mobile-review-star {
        width: 12px;
        height: 12px;
        color: #D1D5DB;
    }

    .mobile-review-star.active {
        color: var(--star);
    }

    .mobile-review-text {
        font-size: 14px;
        color: var(--text);
        line-height: 1.5;
        margin-bottom: 8px;
    }


    .mobile-qa-item {
        padding: var(--s-12);
        border-bottom: 1px solid var(--line);
        margin-bottom: var(--s-12);
    }

    .mobile-question {
        font-size: 14px;
        color: var(--text);
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .mobile-answer {
        font-size: 14px;
        color: var(--text-mute);
        line-height: 1.5;
        padding-left: var(--s-12);
    }

    /* Mobile Product Recommendations & Similar Products */
    .mobile-product-recommendations,
    .mobile-product-similar {
        padding: 12px;
        /* var(--s-16)'den 12px'e düşürüldü */
        background: white;
        border-top: 1px solid var(--line);
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .mobile-product-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        /* var(--s-16)'den 12px'e düşürüldü */
    }

    .mobile-product-section-title {
        font-size: 16px;
        /* 18px'den 16px'e düşürüldü */
        font-weight: 600;
        color: var(--text);
    }

    .mobile-product-section-subtitle {
        font-size: 14px;
        color: var(--text-mute);
        margin-top: 4px;
    }

    .mobile-product-section-link {
        font-size: 14px;
        color: var(--brand);
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-product-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        /* var(--s-12)'den 8px'e düşürüldü */
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-product-card {
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        overflow: hidden;
        transition: box-shadow 0.2s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* Flex shrink için */
    }

    .mobile-product-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-product-card-image {
        position: relative;
        width: 100%;
        height: 100px;
        /* 120px'den 100px'e düşürüldü */
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        /* 8px'den 4px'e düşürüldü */
        border-radius: var(--r-md) var(--r-md) 0 0;
        overflow: hidden;
    }

    .mobile-product-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* contain'den cover'a değiştirildi - kırpma için */
        border-radius: 4px;
    }

    .mobile-product-card-badge {
        position: absolute;
        top: 6px;
        left: 6px;
        background: var(--brand);
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: var(--r-pill);
        font-weight: 500;
    }

    .mobile-product-card-content {
        padding: 12px;
        /* 16px'den 12px'e düşürüldü */
    }

    .mobile-product-card-title {
        font-size: 12px;
        /* 13px'den 12px'e düşürüldü */
        font-weight: 500;
        color: var(--text);
        line-height: 1.3;
        margin-bottom: 6px;
        /* 8px'den 6px'e düşürüldü */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-decoration: none;
    }

    .mobile-product-card-title:hover {
        text-decoration: underline;
    }

    .mobile-product-card-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
        /* 8px'den 6px'e düşürüldü */
    }

    .mobile-product-card-stars {
        display: flex;
        gap: 1px;
    }

    .mobile-product-card-star {
        width: 12px;
        height: 12px;
        color: #D1D5DB;
    }

    .mobile-product-card-star.active {
        color: var(--star);
    }

    .mobile-product-card-rating-text {
        font-size: 11px;
        color: var(--text-mute);
    }

    .mobile-product-card-price {
        margin-bottom: 8px;
        /* var(--s-12)'den 8px'e düşürüldü */
    }

    .mobile-product-card-old-price {
        font-size: 12px;
        color: var(--text-mute);
        text-decoration: line-through;
        margin-bottom: 2px;
    }

    .mobile-product-card-new-price {
        font-size: 13px;
        /* 14px'den 13px'e düşürüldü */
        font-weight: 600;
        color: var(--text);
    }

    .mobile-product-card-add-btn {
        width: 100%;
        height: 28px;
        /* 32px'den 28px'e düşürüldü */
        background: white;
        border: 1px solid var(--brand);
        color: var(--brand);
        border-radius: var(--r-pill);
        font-size: 11px;
        /* 12px'den 11px'e düşürüldü */
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-product-card-add-btn:hover {
        background: var(--brand-soft);
    }

    .mobile-product-card-add-btn:active {
        transform: scale(0.98);
    }

    /* Mobile Reviews Detailed Styles */
    .mobile-review-summary {
        background: white;
        padding: var(--s-16);
        border-bottom: 1px solid var(--line);
        margin-bottom: var(--s-16);
    }

    .mobile-review-overview {
        margin-bottom: var(--s-16);
    }

    .mobile-review-average {
        text-align: center;
    }

    .mobile-review-average-score {
        font-size: 36px;
        font-weight: 700;
        color: var(--text);
    }

    .mobile-review-average-stars {
        display: flex;
        justify-content: center;
        gap: 2px;
        margin: 8px 0;
    }

    .mobile-review-average-star {
        width: 20px;
        height: 20px;
        color: #D1D5DB;
    }

    .mobile-review-average-star.active {
        color: var(--star);
    }

    .mobile-review-total-text {
        font-size: 14px;
        color: var(--text-mute);
    }

    .mobile-review-distribution {
        margin-top: var(--s-16);
    }

    .mobile-review-distribution-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: var(--s-12);
    }

    .mobile-review-distribution-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-review-distribution-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-review-distribution-label {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 40px;
        flex-shrink: 0;
    }

    .mobile-review-distribution-stars {
        font-size: 12px;
        font-weight: 500;
    }

    .mobile-review-distribution-star {
        width: 12px;
        height: 12px;
        color: var(--star);
    }

    .mobile-review-distribution-bar {
        flex: 1;
        height: 8px;
        background: #E5E7EB;
        border-radius: 4px;
        overflow: hidden;
    }

    .mobile-review-distribution-fill {
        height: 100%;
        background: var(--brand);
        transition: width 0.3s ease;
    }

    .mobile-review-distribution-count {
        font-size: 12px;
        color: var(--text-mute);
        width: 20px;
        text-align: right;
    }

    .mobile-review-guidelines {
        background: #FFF7ED;
        border: 1px solid #FED7AA;
        border-radius: var(--r-md);
        padding: var(--s-12);
        margin-bottom: var(--s-16);
    }

    .mobile-review-guidelines-title {
        font-size: 14px;
        font-weight: 600;
        color: #EA580C;
        margin-bottom: 8px;
    }

    .mobile-review-guidelines-content {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        color: #C2410C;
    }

    .mobile-review-guidelines-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .mobile-review-action {
        margin-bottom: var(--s-16);
    }

    .mobile-review-login-notice,
    .mobile-review-purchase-notice {
        text-align: center;
        padding: var(--s-12);
        background: #F9FAFB;
        border-radius: var(--r-md);
    }

    .mobile-review-login-notice p,
    .mobile-review-purchase-notice p {
        font-size: 14px;
        color: var(--text-mute);
        margin-bottom: 8px;
    }

    .mobile-review-login-btn {
        display: inline-block;
        background: var(--brand);
        color: white;
        padding: 8px 16px;
        border-radius: var(--r-pill);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
    }

    .mobile-review-write-btn {
        width: 100%;
        background: var(--brand);
        color: white;
        padding: 12px;
        border: none;
        border-radius: var(--r-md);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-reviews-list-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: var(--s-16);
    }

    .mobile-review-item {
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--s-12);
        margin-bottom: var(--s-12);
    }

    .mobile-review-header {
        display: flex;
        align-items: flex-start;
        gap: var(--s-12);
        margin-bottom: var(--s-12);
    }

    .mobile-review-avatar {
        width: 40px;
        height: 40px;
        background: #3B82F6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .mobile-review-avatar-text {
        color: white;
        font-size: 16px;
        font-weight: 600;
    }

    .mobile-review-user-info {
        flex: 1;
    }

    .mobile-review-user-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 4px;
    }

    .mobile-review-verification {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 4px;
    }

    .mobile-review-verification-icon {
        width: 14px;
        height: 14px;
        color: #10B981;
    }

    .mobile-review-verification-text {
        font-size: 11px;
        color: #10B981;
        font-weight: 500;
    }

    .mobile-review-seller {
        font-size: 11px;
        color: var(--text-mute);
    }

    .mobile-review-rating {
        display: flex;
        gap: 2px;
    }

    .mobile-review-star {
        width: 14px;
        height: 14px;
        color: #D1D5DB;
    }

    .mobile-review-star.active {
        color: var(--star);
    }

    .mobile-review-content {
        margin-left: 52px;
    }

    .mobile-review-text {
        font-size: 14px;
        color: var(--text);
        line-height: 1.5;
        margin-bottom: 8px;
    }


    .mobile-review-show-more {
        text-align: center;
        margin-top: var(--s-16);
    }

    .mobile-review-show-more-btn {
        background: white;
        border: 1px solid var(--brand);
        color: var(--brand);
        padding: 10px 20px;
        border-radius: var(--r-pill);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
    }

    .mobile-review-show-more-btn:hover {
        background: var(--brand-soft);
    }

    .mobile-review-show-more-btn:disabled {
        background: #f5f5f5;
        border-color: #d1d5db;
        color: #9ca3af;
        cursor: not-allowed;
    }

    .mobile-review-empty {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-mute);
    }

    /* Mobile AI Description Badge */
    .mobile-ai-description-badge {
        margin-bottom: var(--s-16);
        padding: var(--s-12);
        background: linear-gradient(135deg, #EFF6FF 0%, #F3E8FF 100%);
        border: 1px solid #BFDBFE;
        border-radius: var(--r-md);
    }

    .mobile-ai-description-content {
        display: flex;
        align-items: flex-start;
        gap: var(--s-12);
    }

    .mobile-ai-description-icon {
        width: 32px;
        height: 32px;
        background: #DBEAFE;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #3B82F6;
    }

    .mobile-ai-description-icon svg {
        width: 16px;
        height: 16px;
    }

    .mobile-ai-description-text {
        flex: 1;
    }

    .mobile-ai-description-title {
        font-size: 14px;
        font-weight: 600;
        color: #1E40AF;
        margin-bottom: 4px;
    }

    .mobile-ai-description-subtitle {
        font-size: 12px;
        color: #2563EB;
        line-height: 1.4;
    }

    /* Mobile Q&A Detailed Styles */
    .mobile-qa-form-section {
        margin-bottom: var(--s-16);
    }

    .mobile-qa-login-notice {
        text-align: center;
        padding: var(--s-12);
        background: #F9FAFB;
        border-radius: var(--r-md);
    }

    .mobile-qa-login-notice p {
        font-size: 14px;
        color: var(--text-mute);
        margin-bottom: 8px;
    }

    .mobile-qa-login-btn {
        display: inline-block;
        background: var(--brand);
        color: white;
        padding: 8px 16px;
        border-radius: var(--r-pill);
        text-decoration: none;
        font-size: 12px;
        font-weight: 500;
    }

    .mobile-qa-ask-btn {
        width: 100%;
        background: var(--brand);
        color: white;
        padding: 12px;
        border: none;
        border-radius: var(--r-md);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-qa-list-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: var(--s-16);
    }

    .mobile-qa-item {
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: var(--s-12);
        margin-bottom: var(--s-12);
    }

    .mobile-qa-item-own {
        border-color: #FED7AA;
        background: #FFF7ED;
    }

    .mobile-qa-question-header {
        display: flex;
        align-items: flex-start;
        gap: var(--s-12);
        margin-bottom: var(--s-12);
    }

    .mobile-qa-question-icon {
        width: 32px;
        height: 32px;
        background: #DBEAFE;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #3B82F6;
    }

    .mobile-qa-question-icon svg {
        width: 16px;
        height: 16px;
    }

    .mobile-qa-question-content {
        flex: 1;
    }

    .mobile-qa-question-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .mobile-qa-question-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
    }

    .mobile-qa-status {
        font-size: 10px;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: var(--r-pill);
    }

    .mobile-qa-status-pending {
        background: #FEF3C7;
        color: #D97706;
    }

    .mobile-qa-status-answered {
        background: #D1FAE5;
        color: #059669;
    }

    .mobile-qa-question-text {
        font-size: 14px;
        color: var(--text);
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .mobile-qa-question-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-qa-question-user {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-qa-user-avatar {
        width: 24px;
        height: 24px;
        background: #3B82F6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 11px;
        font-weight: 600;
    }

    .mobile-qa-user-name {
        font-size: 12px;
        color: var(--text);
        font-weight: 500;
    }

    .mobile-qa-question-date {
        font-size: 11px;
        color: var(--text-mute);
    }

    .mobile-qa-answer-section {
        margin-top: var(--s-12);
        padding-top: var(--s-12);
        border-top: 1px solid var(--line);
    }

    .mobile-qa-answer-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .mobile-qa-answer-icon {
        width: 20px;
        height: 20px;
        color: #10B981;
        flex-shrink: 0;
    }

    .mobile-qa-answer-icon svg {
        width: 100%;
        height: 100%;
    }

    .mobile-qa-answer-label {
        font-size: 14px;
        font-weight: 600;
        color: #10B981;
    }

    .mobile-qa-answer-content {
        margin-left: 28px;
    }

    .mobile-qa-answer-text {
        font-size: 14px;
        color: var(--text);
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .mobile-qa-answer-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-qa-answer-author {
        font-size: 12px;
    }

    .mobile-qa-answer-author strong {
        color: var(--text);
    }

    .mobile-qa-answer-title {
        color: var(--text-mute);
    }

    .mobile-qa-answer-date {
        font-size: 11px;
        color: var(--text-mute);
    }

    .mobile-qa-no-answer {
        margin-top: var(--s-12);
        padding-top: var(--s-12);
        border-top: 1px solid var(--line);
        text-align: center;
    }

    .mobile-qa-no-answer-text {
        font-size: 12px;
        color: var(--text-mute);
        font-style: italic;
    }

    .mobile-qa-show-more {
        text-align: center;
        margin-top: var(--s-16);
    }

    .mobile-qa-show-more-btn {
        background: white;
        border: 1px solid var(--brand);
        color: var(--brand);
        padding: 10px 20px;
        border-radius: var(--r-pill);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .mobile-qa-empty {
        text-align: center;
        padding: 40px 20px;
    }

    .mobile-qa-empty-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 16px;
        color: var(--text-mute);
    }

    .mobile-qa-empty-icon svg {
        width: 100%;
        height: 100%;
    }

    .mobile-qa-empty-text {
        font-size: 16px;
        color: var(--text);
        font-weight: 500;
        margin-bottom: 4px;
    }

    .mobile-qa-empty-subtitle {
        font-size: 14px;
        color: var(--text-mute);
    }

    /* Mobile Question Form Styles */
    .mobile-qa-form {
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: 16px;
        margin-bottom: 16px;
    }

    .mobile-qa-form-title {
        font-size: var(--fs-xl);
        font-weight: var(--fw-bold);
        color: var(--text);
        margin-bottom: 16px;
    }

    .mobile-qa-form-fields {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mobile-qa-form-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-qa-form-label {
        font-size: var(--fs-md);
        font-weight: var(--fw-medium);
        color: var(--text);
    }

    .mobile-qa-form-input,
    .mobile-qa-form-textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        font-size: var(--fs-md);
        color: var(--text);
        background: white;
        box-sizing: border-box;
    }

    .mobile-qa-form-input:focus,
    .mobile-qa-form-textarea:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 1px var(--brand);
    }

    .mobile-qa-form-input[readonly] {
        background: #f9f9f9;
        color: var(--text-mute);
    }

    .mobile-qa-form-textarea {
        resize: vertical;
        min-height: 80px;
    }

    .mobile-qa-form-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
    }

    .mobile-qa-form-cancel {
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: white;
        color: var(--text);
        font-size: var(--fs-md);
        cursor: pointer;
    }

    .mobile-qa-form-cancel:hover {
        background: #f9f9f9;
    }

    .mobile-qa-form-submit {
        padding: 10px 16px;
        border: none;
        border-radius: var(--r-sm);
        background: var(--brand);
        color: white;
        font-size: var(--fs-md);
        font-weight: var(--fw-medium);
        cursor: pointer;
    }

    .mobile-qa-form-submit:hover {
        background: #ea5505;
    }

    /* Mobile Account User Info Styles - Varsayılan olarak gizli */
    .mobile-account-user-info {
        display: none !important;
        background-color: #ffffff;
        min-height: 100vh;
        padding-bottom: 80px;
        /* Bottom nav space */
    }

    /* Account page mobile specific */
    body.account-page-mobile {
        padding-bottom: 80px;
    }

    /* Hesap sayfasında bottom nav için beyaz background */
    body.account-page-mobile .mobile-bottom-nav {
        background: #ffffff !important;
        z-index: 1000;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }

    /* Desktop'ta mobil elemanları gizli */
    @media (min-width: 769px) {

        /* Mobil bottom navigation gizli */
        .mobile-bottom-nav,
        body.account-page-mobile .mobile-bottom-nav {
            display: none !important;
        }

        /* Mobil account user info gizli */
        .mobile-account-user-info {
            display: none !important;
        }

        /* Account page padding düzelt */
        body.account-page-mobile {
            padding-bottom: 0 !important;
        }

        /* Sidebar'ı desktop'ta göster */
        .mobile-hide-sidebar {
            display: block !important;
        }
    }

    @media (max-width: 768px) {
        .mobile-account-user-info {
            display: block !important;
        }

        /* Hide desktop version on mobile */
        .desktop-user-info {
            display: none !important;
        }

        /* Hide sidebar on mobile for user info section */
        .mobile-hide-sidebar {
            display: none !important;
            width: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }

        /* Main content full width on mobile when sidebar is hidden */
        .flex.flex-col.lg\\:flex-row.gap-6 {
            flex-direction: column !important;
            gap: 0 !important;
        }

        .flex-1 {
            width: 100% !important;
            max-width: 100% !important;
        }
    }

    /* Mobile Account Header */
    .mobile-account-header {
        padding: 16px 16px 12px 16px;
        background: #ffffff;
    }

    .mobile-account-logo-wrapper {
        margin-bottom: 16px;
    }

    .mobile-account-logo {
        max-height: 24px;
        width: auto;
    }

    .mobile-account-logo-text {
        font-size: 20px;
        font-weight: bold;
        color: #FF6A00;
    }

    .mobile-account-welcome {
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 18px;
        font-weight: 500;
        /* Medium */
        color: #000000;
        margin: 0;
        letter-spacing: -0.6px;
        /* -60 letter spacing */
    }

    /* Mobile Account Tabs */
    .mobile-account-tabs {
        padding: 0 16px 16px 16px;
        background: #ffffff;
        position: relative;
    }

    .mobile-account-main-tabs {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .mobile-account-tab {
        flex: 1;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        color: #FF6A00;
        background: transparent;
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .mobile-account-tab.active {
        background: #FF6A00;
        color: #ffffff;
        border-color: #FF6A00;
    }

    .mobile-account-tab:hover:not(.active) {
        background: #FFF5F0;
    }

    /* Menu Button */
    .mobile-account-menu-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #FF6A00;
        background: transparent;
        color: #FF6A00;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-left: 4px;
        flex-shrink: 0;
    }

    .mobile-account-menu-btn.active,
    .mobile-account-menu-btn:hover {
        background: #FF6A00;
        color: #ffffff;
    }

    .mobile-account-menu-icon {
        width: 18px;
        height: 18px;
    }

    /* Dropdown Menu */
    .mobile-account-dropdown {
        position: absolute;
        top: 100%;
        right: 16px;
        left: 16px;
        background: #ffffff;
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow: hidden;
    }

    .mobile-account-dropdown-header {
        display: flex;
        justify-content: flex-end;
        padding: 8px 12px;
        border-bottom: 1px solid #F0F0F0;
    }

    .mobile-account-dropdown-close {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #666666;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.2s ease;
    }

    .mobile-account-dropdown-close:hover {
        background: #F5F5F5;
        color: #FF6A00;
    }

    .mobile-account-dropdown-item {
        display: block;
        padding: 12px 16px;
        font-size: 14px;
        color: #333333;
        text-decoration: none;
        border-bottom: 1px solid #F0F0F0;
        transition: background-color 0.2s ease;
    }

    .mobile-account-dropdown-item:last-child {
        border-bottom: none;
    }

    .mobile-account-dropdown-item:hover {
        background: #FFF5F0;
        color: #FF6A00;
    }

    /* Mobile Account Form */
    .mobile-account-form-wrapper {
        padding: 0 16px 24px 16px;
        background: #ffffff;
    }

    /* Mobile Account Sections */
    .mobile-account-section {
        min-height: 100vh;
        background: #ffffff;
    }

    .mobile-account-content {
        padding: 0 16px 80px 16px;
        background: #ffffff;
    }

    /* Empty State */
    .mobile-account-empty-state {
        text-align: center;
        padding: 40px 20px;
    }

    .mobile-account-empty-icon {
        width: 64px;
        height: 64px;
        color: #D1D5DB;
        margin: 0 auto 16px auto;
    }

    .mobile-account-empty-title {
        font-size: 18px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 8px;
    }

    .mobile-account-empty-text {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 24px;
        line-height: 1.5;
    }

    .mobile-account-empty-button {
        display: inline-flex;
        align-items: center;
        padding: 12px 24px;
        background: #FF6A00;
        color: #ffffff;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .mobile-account-empty-button:hover {
        background: #E75F00;
    }

    /* Product Cards in Mobile */
    .mobile-account-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .mobile-account-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        overflow: hidden;
    }

    .mobile-account-card-image {
        position: relative;
        aspect-ratio: 1;
        background: #F9FAFB;
    }

    .mobile-account-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-account-card-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
        background: #DC2626;
        color: #ffffff;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0.9;
        transition: opacity 0.2s ease;
    }

    .mobile-account-card-remove:hover {
        opacity: 1;
    }

    .mobile-account-card-content {
        padding: 12px;
    }

    .mobile-account-card-title {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 4px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-account-card-seller {
        font-size: 12px;
        color: #6B7280;
        margin-bottom: 8px;
    }

    .mobile-account-card-price {
        margin-bottom: 12px;
    }

    .mobile-account-card-sale-price {
        font-size: 16px;
        font-weight: 600;
        color: #FF6A00;
        margin-right: 8px;
    }

    .mobile-account-card-original-price {
        font-size: 12px;
        color: #9CA3AF;
        text-decoration: line-through;
    }

    .mobile-account-card-price-single {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .mobile-account-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mobile-account-card-view {
        padding: 8px 12px;
        background: #FF6A00;
        color: #ffffff;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        border-radius: 6px;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    .mobile-account-card-view:hover {
        background: #E75F00;
    }

    .mobile-account-card-remove-btn {
        padding: 8px 12px;
        background: transparent;
        color: #DC2626;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #DC2626;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-account-card-remove-btn:hover {
        background: #FEF2F2;
    }

    /* Reviews Mobile */
    .mobile-account-reviews {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-account-review-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 16px;
    }

    .mobile-account-review-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .mobile-account-review-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        flex: 1;
        margin-right: 12px;
        line-height: 1.3;
    }

    .mobile-account-review-rating {
        display: flex;
        gap: 2px;
    }

    .mobile-review-star {
        width: 16px;
        height: 16px;
        color: #D1D5DB;
    }

    .mobile-review-star.filled {
        color: #FCD34D;
    }

    .mobile-account-review-comment {
        font-size: 14px;
        color: #374151;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .mobile-account-review-footer {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-account-review-date {
        font-size: 12px;
        color: #9CA3AF;
    }

    /* Questions Mobile */
    .mobile-account-questions {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-account-question-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 16px;
    }

    .mobile-account-question-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .mobile-account-question-product {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        flex: 1;
        margin-right: 12px;
        line-height: 1.3;
    }

    .mobile-account-question-status {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: 500;
    }

    .mobile-account-question-status.answered {
        background: #D1FAE5;
        color: #065F46;
    }

    .mobile-account-question-status.pending {
        background: #FEF3C7;
        color: #92400E;
    }

    .mobile-account-question-content {
        margin-bottom: 12px;
    }

    .mobile-account-question-text {
        font-size: 14px;
        color: #374151;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .mobile-account-question-answer {
        font-size: 14px;
        color: #374151;
        line-height: 1.5;
        background: #F9FAFB;
        padding: 12px;
        border-radius: 6px;
        border-left: 3px solid #10B981;
    }

    .mobile-account-question-footer {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-account-question-date {
        font-size: 12px;
        color: #9CA3AF;
    }

    /* Addresses Mobile */
    .mobile-account-addresses {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-account-address-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 16px;
    }

    .mobile-account-address-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .mobile-account-address-title {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .mobile-account-address-default {
        font-size: 12px;
        padding: 4px 8px;
        background: #DBEAFE;
        color: #1E40AF;
        border-radius: 12px;
        font-weight: 500;
    }

    .mobile-account-address-content {
        margin-bottom: 16px;
    }

    .mobile-account-address-line {
        font-size: 14px;
        color: #374151;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .mobile-account-address-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mobile-account-address-edit {
        padding: 10px 16px;
        background: #FF6A00;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .mobile-account-address-edit:hover {
        background: #E75F00;
    }

    .mobile-account-address-delete {
        padding: 10px 16px;
        background: transparent;
        color: #DC2626;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid #DC2626;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-account-address-delete:hover {
        background: #FEF2F2;
    }

    /* Orders Mobile */
    .mobile-account-orders {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-account-order-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        padding: 16px;
    }

    .mobile-account-order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .mobile-account-order-number {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .mobile-account-order-status {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 12px;
        font-weight: 500;
    }

    .mobile-account-order-status.completed {
        background: #D1FAE5;
        color: #065F46;
    }

    .mobile-account-order-status.pending {
        background: #FEF3C7;
        color: #92400E;
    }

    .mobile-account-order-status.cancelled {
        background: #FEE2E2;
        color: #991B1B;
    }

    .mobile-account-order-status.processing {
        background: #E0E7FF;
        color: #3730A3;
    }

    .mobile-account-order-date {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 8px;
    }

    .mobile-account-order-total {
        font-size: 18px;
        font-weight: 600;
        color: #FF6A00;
        margin-bottom: 16px;
    }

    .mobile-account-order-actions {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-account-order-detail {
        padding: 10px 20px;
        background: #FF6A00;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        border-radius: 6px;
        transition: background-color 0.2s ease;
    }

    .mobile-account-order-detail:hover {
        background: #E75F00;
    }

    /* Yeni Mobile Orders Design */
    .mobile-orders-content {
        padding: 0 16px 80px 16px;
        background: #ffffff;
    }

    /* Header */
    .mobile-orders-header {
        padding: 12px 0;
    }

    .mobile-orders-title {
        font-size: 24px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    /* Search */
    .mobile-orders-search {
        margin: 12px 0;
    }

    .mobile-search-input-wrapper {
        position: relative;
        width: 100%;
    }

    .mobile-search-input-wrapper .mobile-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: #9CA3AF;
        pointer-events: none;
    }

    .mobile-search-input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 44px;
        background: #F3F4F6;
        border: 1px solid #D1D5DB;
        border-radius: 22px;
        font-size: 14px;
        color: #111827;
        outline: none;
    }

    .mobile-search-input::placeholder {
        color: #9CA3AF;
    }

    .mobile-search-input:focus {
        border-color: #FF6A00;
        background: #ffffff;
    }

    .mobile-search-input[readonly] {
        cursor: pointer;
    }

    /* Comprehensive Autofill Prevention */
    .mobile-search-input:-webkit-autofill,
    .mobile-search-input:-webkit-autofill:hover,
    .mobile-search-input:-webkit-autofill:focus,
    .mobile-search-input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px #F3F4F6 inset !important;
        -webkit-text-fill-color: #111827 !important;
        background-color: #F3F4F6 !important;
        background-image: none !important;
        -webkit-background-clip: text !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }

    .mobile-search-input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        background-color: #ffffff !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }

    /* Additional autofill blocking */
    .mobile-search-input:not([autocomplete]):not([type="password"]):not([type="email"]):not([type="tel"]) {
        -webkit-text-security: none !important;
    }

    /* Filters */
    .mobile-orders-filters {
        margin: 12px 0;
    }

    .mobile-filter-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mobile-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .mobile-filter-chip {
        flex-shrink: 0;
        height: 32px;
        padding: 0 12px;
        border: 1px solid #D1D5DB;
        border-radius: 16px;
        background: #ffffff;
        color: #374151;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .mobile-filter-chip:hover {
        border-color: #FF6A00;
        background: #FFF5F0;
    }

    .mobile-filter-chip.active {
        border-color: #FF6A00;
        background: #FFF5F0;
        color: #FF6A00;
        font-weight: 500;
    }

    /* Orders List */
    .mobile-orders-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 12px;
    }

    /* Order Card */
    .mobile-order-card {
        background: #ffffff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-order-card:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .mobile-order-card-content {
        display: flex;
        padding: 12px;
        gap: 12px;
    }

    /* Thumbnail */
    .mobile-order-thumbnail {
        width: 72px;
        height: 72px;
        border-radius: 10px;
        background: #FAFAFB;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-order-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-order-thumbnail-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9CA3AF;
    }

    .mobile-order-thumbnail-placeholder svg {
        width: 32px;
        height: 32px;
    }

    /* Order Info */
    .mobile-order-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
    }

    .mobile-order-status {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .mobile-order-status-ödeme-bekleniyor,
    .mobile-order-status-pending-payment {
        color: #D97706;
    }

    .mobile-order-status-hazırlanıyor,
    .mobile-order-status-processing {
        color: #3B82F6;
    }

    .mobile-order-status-kargoda,
    .mobile-order-status-shipped {
        color: #8B5CF6;
    }

    .mobile-order-status-teslim-edildi,
    .mobile-order-status-delivered {
        color: #10B981;
    }

    .mobile-order-status-iptal-edildi,
    .mobile-order-status-cancelled {
        color: #EF4444;
    }

    .mobile-order-number {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 2px;
    }

    .mobile-order-date {
        font-size: 14px;
        color: #6B7280;
        margin-bottom: 8px;
    }

    /* Bottom Section */
    .mobile-order-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 44px;
    }

    .mobile-order-total-section {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-order-total-label {
        font-size: 12px;
        color: #9CA3AF;
    }

    .mobile-order-total-amount {
        font-size: 16px;
        font-weight: 600;
        color: #10B981;
    }

    .mobile-order-detail-link {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #9CA3AF;
        font-size: 14px;
    }

    .mobile-order-chevron {
        width: 16px;
        height: 16px;
    }

    .mobile-account-form-row {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-account-form-row .mobile-account-form-group {
        flex: 1;
        margin-bottom: 0;
    }

    .mobile-account-form-group {
        margin-bottom: 12px;
    }

    .mobile-account-input {
        width: 100%;
        height: 44px;
        background: #F2F2F2;
        border: none;
        border-radius: 6px;
        padding: 0 12px;
        font-size: 14px;
        color: #000000;
        outline: none;
        transition: background-color 0.2s ease;
    }

    .mobile-account-input::placeholder {
        color: #8E9099;
    }

    .mobile-account-input:focus {
        background: #E8E8E8;
    }

    /* Select styling */
    select.mobile-account-input {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238E9099' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    /* Phone wrapper */
    .mobile-account-phone-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .mobile-account-phone-wrapper .mobile-account-input {
        padding-right: 60px;
    }

    .mobile-account-phone-update {
        position: absolute;
        right: 12px;
        font-size: 12px;
        color: #FF6A00;
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-account-phone-update:hover {
        text-decoration: underline;
    }

    /* Password Section */
    .mobile-account-password-section {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #E5E5E5;
    }

    .mobile-account-password-title {
        font-size: 14px;
        font-weight: 600;
        color: #3B82F6;
        margin: 0 0 8px 0;
    }

    .mobile-account-password-desc {
        font-size: 12px;
        color: #6B6B6B;
        margin: 0 0 12px 0;
        line-height: 1.4;
    }

    /* Submit Button */
    .mobile-account-submit-btn {
        width: 100%;
        height: 44px;
        background: #FF6A00;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        margin-top: 20px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .mobile-account-submit-btn:hover {
        background: #E75F00;
    }

    .mobile-account-submit-btn:active {
        background: #D65500;
    }

    /* Messages */
    .mobile-account-message {
        margin-top: 16px;
        padding: 12px;
        border-radius: 6px;
        font-size: 14px;
        text-align: center;
    }

    .mobile-account-message.success {
        background: #D4EDDA;
        color: #155724;
        border: 1px solid #C3E6CB;
    }

    .mobile-account-message.error {
        background: #F8D7DA;
        color: #721C24;
        border: 1px solid #F5C6CB;
    }

    /* Phone Update Modal Mobile Responsive */
    @media (max-width: 768px) {
        #phoneUpdateModal .bg-white {
            margin: 16px;
            max-width: calc(100vw - 32px);
            width: auto;
        }

        #phoneUpdateModal h3 {
            font-size: 18px;
        }

        #phoneUpdateModal .space-y-4 input {
            font-size: 16px;
            /* Prevent zoom on iOS */
        }
    }

}

/* ====== MOBILE ORDER DETAIL STYLES ====== */
@media (max-width: 768px) {

    /* Body class specifically for order detail page */
    body.order-detail-mobile {
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: -0.6px;
    }

    /* Hide desktop header on mobile order detail */
    body.order-detail-mobile header {
        display: none !important;
    }

    /* Mobile Order Detail Section */
    body.order-detail-mobile .mobile-order-detail-section {
        width: 100vw;
        min-height: 100vh;
        background: var(--bg, #ffffff);
        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: -0.6px;
        position: relative;
        padding-bottom: 20px;
        /* Normal spacing */
    }

    /* Mobile Order Detail Header */
    .mobile-order-detail-header {
        padding: var(--s-12, 12px) var(--s-16, 16px) var(--s-16, 16px);
        background: var(--bg, #ffffff);
        border-bottom: 1px solid var(--line, #E5E7EB);
    }

    .mobile-order-detail-logo {
        margin-bottom: var(--s-12, 12px);
    }

    .mobile-order-detail-logo img {
        max-height: 24px;
        width: auto;
    }

    .mobile-order-detail-title {
        font-size: 24px;
        font-weight: 700;
        color: var(--text, #1F2937);
        line-height: 1.2;
        margin-bottom: var(--s-12, 12px);
    }

    .mobile-order-detail-back {
        margin-bottom: var(--s-16, 16px);
    }

    .mobile-order-detail-back-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-mute, #6B7280);
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
    }

    .mobile-order-detail-back-icon {
        width: 20px;
        height: 20px;
    }

    .mobile-order-number {
        color: #FF580C;
    }

    /* Mobile Order Detail Content */
    .mobile-order-detail-content {
        padding: 0 var(--s-16, 16px);
    }

    /* Section Titles */
    .mobile-order-section-title {
        font-size: 18px;
        font-weight: 500;
        color: var(--text, #1F2937);
        margin: 20px 0 12px;
    }

    /* Sipariş Durumu Timeline */
    .mobile-order-status-section {
        margin-bottom: 12px;
    }

    .mobile-order-timeline {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .mobile-order-step {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        position: relative;
    }

    .mobile-order-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 9px;
        top: 20px;
        bottom: -16px;
        width: 1px;
        background: var(--line, #E5E7EB);
    }

    .mobile-order-step-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .mobile-order-step.completed .mobile-order-step-icon {
        background: var(--brand, #FF6A00);
        border: 2px solid var(--brand, #FF6A00);
    }

    .mobile-order-step.active .mobile-order-step-icon {
        background: var(--brand, #FF6A00);
        border: 2px solid var(--brand, #FF6A00);
    }

    .mobile-order-step.pending .mobile-order-step-icon {
        background: #CFCFD4;
        border: 2px solid #CFCFD4;
    }

    .mobile-order-step-check {
        width: 12px;
        height: 12px;
        color: white;
    }

    .mobile-order-step-dot {
        width: 8px;
        height: 8px;
        background: white;
        border-radius: 50%;
    }

    .mobile-order-step-empty {
        width: 8px;
        height: 8px;
        background: #6B7280;
        border-radius: 50%;
    }

    .mobile-order-step-content {
        flex: 1;
        padding-top: 1px;
    }

    .mobile-order-step-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .mobile-order-step.active .mobile-order-step-title {
        color: var(--brand, #FF6A00);
    }

    .mobile-order-step.completed .mobile-order-step-title {
        color: var(--text, #1F2937);
    }

    .mobile-order-step.pending .mobile-order-step-title {
        color: var(--text-dim, #6B7280);
    }

    .mobile-order-step-description {
        font-size: 14px;
        color: var(--text-mute, #9CA3AF);
        line-height: 1.4;
    }

    /* Siparişteki Ürünler */
    .mobile-order-products-section {
        margin-bottom: 12px;
    }

    .mobile-order-products-list {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .mobile-order-product-card {
        display: flex;
        gap: 12px;
        padding: 12px;
        background: var(--card, #ffffff);
        border: 1px solid var(--line, #E5E7EB);
        border-radius: 8px;
        margin-bottom: 1px;
    }

    .mobile-order-product-image {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        border-radius: 10px;
        background: #FAFAFB;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-order-product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-order-product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-order-product-name {
        font-size: 16px;
        font-weight: 500;
        color: var(--text, #1F2937);
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-order-product-seller {
        font-size: 14px;
        color: var(--text-dim, #6B7280);
    }

    .mobile-order-seller-link {
        color: var(--brand, #FF6A00);
        text-decoration: none;
        font-weight: 500;
    }

    .mobile-order-product-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    .mobile-order-product-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--success, #10B981);
    }

    .mobile-order-product-quantity {
        font-size: 14px;
        color: var(--text-mute, #9CA3AF);
    }

    /* Adres Bilgileri */
    .mobile-order-address-section {
        margin-bottom: 12px;
    }

    .mobile-order-address-card {
        background: var(--bg-soft, #F9FAFB);
        border: 1px solid var(--line, #E5E7EB);
        border-radius: 12px;
        padding: 16px;
    }

    .mobile-order-address-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--text, #1F2937);
        margin-bottom: 8px;
    }

    .mobile-order-address-text {
        font-size: 14px;
        color: var(--text-dim, #6B7280);
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .mobile-order-address-contact {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-order-address-name,
    .mobile-order-address-phone {
        font-size: 14px;
        color: var(--text, #1F2937);
    }

    /* Ödeme Bilgileri */
    .mobile-order-payment-section {
        margin-bottom: 12px;
    }

    .mobile-order-payment-card {
        background: var(--bg-soft, #F9FAFB);
        border: 1px solid var(--line, #E5E7EB);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-order-payment-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--line, #E5E7EB);
    }

    .mobile-order-payment-row:last-child {
        border-bottom: none;
    }

    .mobile-order-payment-label {
        font-size: 16px;
        color: var(--text-dim, #6B7280);
    }

    .mobile-order-payment-value {
        font-size: 16px;
        color: var(--text, #1F2937);
        font-weight: 500;
    }

    .mobile-order-payment-shipping {
        color: var(--success, #10B981);
    }

    .mobile-order-payment-discount {
        color: var(--success, #10B981);
    }

    .mobile-order-payment-total {
        margin-top: 8px;
        padding-top: 16px;
        border-top: 2px solid var(--line, #E5E7EB);
        border-bottom: none;
    }

    .mobile-order-payment-total .mobile-order-payment-label {
        font-size: 18px;
        font-weight: 500;
        color: var(--text, #1F2937);
    }

    .mobile-order-payment-total-amount {
        font-size: 18px;
        font-weight: 700;
        color: var(--brand, #FF6A00);
    }

    /* Mobile Order Detail Action Buttons */
    .mobile-order-detail-actions {
        margin-top: 24px;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-order-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 48px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-order-action-icon {
        width: 16px;
        height: 16px;
    }

    .mobile-order-pay-btn {
        background: #10B981;
        color: white;
    }

    .mobile-order-pay-btn:hover {
        background: #059669;
    }

    .mobile-order-cancel-btn {
        background: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FEE2E2;
    }

    .mobile-order-cancel-btn:hover {
        background: #FEE2E2;
    }
}

/* ====== MOBILE CATEGORIES STYLES ====== */
@media (max-width: 768px) {

    /* CSS Variables for mobile categories */
    body.categories-mobile {
        --fs-xl: 20px;
        --fs-md: 16px;
        --fs-sm: 14px;
        --fw-bold: 700;
        --text: #1F2937;
        --text-dim: #6B7280;
        --text-mute: #9CA3AF;
        --bg: #ffffff;
        --line: #E5E7EB;
        --brand: #FF6A00;
        --r-pill: 22px;
        --r-md: 8px;
        --s-8: 8px;
        --s-12: 12px;
        --s-16: 16px;
        --s-20: 20px;
        --s-24: 24px;
        --s-32: 32px;
        --s-40: 40px;

        font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: -0.6px;
    }

    /* Hide desktop header on mobile categories */
    body.categories-mobile header {
        display: none !important;
    }

    /* Mobile Categories Section */
    body.categories-mobile .mobile-categories-section {
        width: 100vw;
        min-height: 100vh;
        background: var(--bg, #ffffff);
        padding: 0 var(--s-16, 16px);
        padding-bottom: 80px;
        /* Space for bottom nav */
    }

    /* Mobile Categories Header */
    .mobile-categories-header {
        padding: var(--s-16, 16px) 0;
        border-bottom: 1px solid var(--line, #E5E7EB);
        margin-bottom: var(--s-16, 16px);
    }

    .mobile-categories-logo {
        margin-bottom: var(--s-16, 16px);
    }

    .mobile-categories-logo img {
        max-height: 24px;
        width: auto;
    }

    .mobile-categories-title {
        font-size: var(--fs-xl, 20px);
        font-weight: var(--fw-bold, 700);
        color: var(--text, #1F2937);
        margin-bottom: var(--s-12, 12px);
    }

    /* Mobile Search Button */
    .mobile-categories-search {
        margin-bottom: var(--s-16, 16px);
    }

    .mobile-search-button {
        width: 100%;
        height: 44px;
        background: #F3F4F6;
        border: 1px solid var(--line, #E5E7EB);
        border-radius: var(--r-pill, 22px);
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 var(--s-12, 12px);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-search-button:hover {
        background: #ffffff;
        border-color: var(--brand, #FF6A00);
    }

    .mobile-search-icon {
        width: 20px;
        height: 20px;
        color: var(--text-mute, #9CA3AF);
        flex-shrink: 0;
    }

    .mobile-search-placeholder {
        color: var(--text-mute, #9CA3AF);
        font-size: 14px;
        flex: 1;
        text-align: left;
        margin-left: 4px;
    }

    /* Generic mobile search button for layout.blade.php */
    .mobile-generic-search-btn {
        width: 100%;
        height: 44px;
        background: #F3F4F6;
        border: 1px solid #E5E7EB;
        border-radius: 22px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-generic-search-btn:hover {
        background: #ffffff;
        border-color: #FF6A00;
    }

    .mobile-generic-search-btn svg {
        width: 20px;
        height: 20px;
        color: #9CA3AF;
        flex-shrink: 0;
    }

    .mobile-generic-search-btn span {
        color: #9CA3AF;
        font-size: 14px;
        flex: 1;
        text-align: left;
    }

    /* Mobile search input button combination for index.php */
    .mobile-search-input.mobile-search-button {
        width: 100%;
        height: 48px;
        background: #F3F4F6;
        border: 1px solid #E5E7EB;
        border-radius: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        overflow: visible;
    }

    .mobile-search-input.mobile-search-button:hover {
        background: #ffffff;
        border-color: #FF6A00;
    }

    .mobile-search-input.mobile-search-button .mobile-search-icon {
        width: 18px;
        height: 18px;
        color: #9CA3AF;
        flex-shrink: 0;
        display: block;
    }

    .mobile-search-input.mobile-search-button span {
        color: #9CA3AF;
        font-size: 14px;
        flex: 1;
        text-align: left;
        line-height: 1.2;
    }

    /* Mobile Order Track Button */
    .mobile-order-track-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 4px;
        border-radius: 6px;
        transition: all 0.2s ease;
        text-decoration: none;
        margin: 0;
    }

    .mobile-order-track-btn:hover {
        background: rgba(255, 106, 0, 0.1);
    }

    .mobile-order-track-btn svg {
        width: 20px;
        height: 22px;
        stroke: #484848;
        transition: stroke 0.2s ease;
    }

    .mobile-order-track-btn:hover svg {
        stroke: #FF6A00;
    }

    /* Mobile Categories List */
    .mobile-categories-list {
        display: flex;
        flex-direction: column;
        gap: var(--s-8, 8px);
    }

    /* Mobile Category Item */
    .mobile-category-item {
        background: var(--bg, #ffffff);
        border: 1px solid var(--line, #E5E7EB);
        border-radius: var(--r-md, 8px);
        overflow: hidden;
        transition: all 0.2s ease;
    }

    .mobile-category-item.mobile-category-open {
        border-color: var(--brand, #FF6A00);
    }

    /* Mobile Category Header */
    .mobile-category-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--s-12, 12px);
        height: 44px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-category-item.mobile-category-open .mobile-category-header {
        background: rgba(255, 106, 0, 0.05);
    }

    .mobile-category-name {
        font-size: var(--fs-md, 16px);
        color: var(--text, #1F2937);
        font-weight: 500;
        transition: color 0.2s ease;
    }

    .mobile-category-item.mobile-category-open .mobile-category-name {
        color: var(--brand, #FF6A00);
    }

    .mobile-category-arrow {
        width: 18px;
        height: 18px;
        color: var(--text-mute, #9CA3AF);
        transition: all 0.2s ease;
    }

    .mobile-category-item.mobile-category-open .mobile-category-arrow {
        color: var(--brand, #FF6A00);
    }

    /* Mobile Category Link (no children) */
    .mobile-category-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--s-12, 12px);
        height: 44px;
        text-decoration: none;
        color: inherit;
        transition: all 0.2s ease;
    }

    .mobile-category-link:hover {
        background: rgba(255, 106, 0, 0.05);
        color: var(--brand, #FF6A00);
    }

    .mobile-category-link .mobile-category-name {
        color: inherit;
    }

    /* Mobile Category Children */
    .mobile-category-children {
        border-top: 1px solid var(--line, #E5E7EB);
        background: #FAFBFC;
        padding: var(--s-8, 8px) 0;
    }

    /* Mobile Subcategory Items */
    .mobile-subcategory-item {
        padding: var(--s-12, 12px) var(--s-16, 16px);
    }

    .mobile-subcategory-link {
        display: block;
        font-size: var(--fs-sm, 14px);
        color: var(--text-dim, #6B7280);
        text-decoration: none;
        transition: color 0.2s ease;
        line-height: 1.4;
    }

    .mobile-subcategory-link:hover {
        color: var(--brand, #FF6A00);
    }

    /* Nested Subcategories */
    .mobile-subcategory-level-2 {
        padding-left: var(--s-24, 24px);
    }

    .mobile-subcategory-level-3 {
        padding-left: var(--s-32, 32px);
    }

    .mobile-subcategory-level-4 {
        padding-left: var(--s-40, 40px);
    }

    .mobile-subcategory-level-2 .mobile-subcategory-link {
        font-size: 13px;
    }

    .mobile-subcategory-level-3 .mobile-subcategory-link,
    .mobile-subcategory-level-4 .mobile-subcategory-link {
        font-size: 12px;
        color: var(--text-mute, #9CA3AF);
    }

    /* Subcategory Children Separator */
    .mobile-subcategory-children {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dotted #E5E7EB;
    }
}

/* DESKTOP OVERRIDE - EN YÜKSEK ÖNCELİK */
@media screen and (min-width: 769px) {

    /* Tüm mobil elemanları kesinlikle gizle */
    .mobile-bottom-nav,
    .mobile-nav-item,
    .mobile-nav-label,
    .mobile-nav-badge,
    .mobile-account-user-info,
    .mobile-account-header,
    .mobile-account-logo-wrapper,
    .mobile-account-welcome,
    .mobile-account-tabs,
    .mobile-account-tab,
    .mobile-account-main-tabs,
    .mobile-account-menu-btn,
    .mobile-account-dropdown,
    .mobile-account-dropdown-header,
    .mobile-account-dropdown-close,
    .mobile-account-dropdown-item,
    .mobile-account-form-wrapper,
    .mobile-account-section,
    .mobile-account-content,
    .mobile-account-empty-state,
    .mobile-account-grid,
    .mobile-account-card,
    .mobile-account-reviews,
    .mobile-account-questions,
    .mobile-account-addresses,
    .mobile-account-orders,
    .mobile-orders-content,
    .mobile-orders-header,
    .mobile-orders-search,
    .mobile-orders-filters,
    .mobile-orders-list,
    .mobile-order-card,
    .mobile-order-detail-section,
    .mobile-order-detail-header,
    .mobile-order-detail-logo,
    .mobile-order-detail-back,
    .mobile-order-detail-title,
    .mobile-order-detail-content,
    .mobile-order-section-title,
    .mobile-order-status-section,
    .mobile-order-timeline,
    .mobile-order-step,
    .mobile-order-products-section,
    .mobile-order-product-card,
    .mobile-order-address-section,
    .mobile-order-address-card,
    .mobile-order-payment-section,
    .mobile-order-payment-card,
    .mobile-order-detail-actions,
    .mobile-order-action-btn,
    .mobile-order-pay-btn,
    .mobile-order-cancel-btn,
    body.order-detail-mobile .mobile-order-detail-section,
    body.order-detail-mobile .mobile-order-detail-header,
    body.order-detail-mobile .mobile-order-detail-content,
    body.order-detail-mobile .mobile-order-detail-actions,
    body .mobile-bottom-nav,
    body.account-page-mobile .mobile-bottom-nav,
    body.account-page-mobile .mobile-account-user-info {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Desktop'ta sidebar'ı göster */
    .mobile-hide-sidebar,
    body .mobile-hide-sidebar,
    body.account-page-mobile .mobile-hide-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Padding'i sıfırla */
    body.account-page-mobile {
        padding-bottom: 0 !important;
    }

    /* Desktop user info göster */
    .desktop-user-info {
        display: block !important;
    }
}

/* Mobile Account User Info Header */
@media (max-width: 768px) {
    .mobile-account-user-info-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 16px;
        background: #ffffff;
        border-bottom: 1px solid #E5E7EB;
    }

    .mobile-account-user-avatar {
        width: 48px;
        height: 48px;
        background: #FF6A00;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 18px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .mobile-account-user-details {
        flex: 1;
        min-width: 0;
    }

    .mobile-account-user-name {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin: 0 0 4px 0;
        line-height: 1.2;
    }

    .mobile-account-user-phone {
        font-size: 14px;
        color: #6B7280;
        line-height: 1.2;
    }

    .mobile-account-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: #DC2626;
        transition: all 0.2s ease;
        border-radius: 8px;
        flex-shrink: 0;
        text-decoration: none;
    }

    .mobile-account-logout:hover {
        background: #FEF2F2;
        color: #991B1B;
    }
}

/* Desktop'ta yeni header elemanlarını gizle */
@media (min-width: 769px) {

    .mobile-account-user-info-header,
    .mobile-account-user-avatar,
    .mobile-account-user-details,
    .mobile-account-user-name,
    .mobile-account-user-phone,
    .mobile-account-logout {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Homepage Mobile Grid Layout */
@media (max-width: 768px) {
    .mobile-products-grid {
        padding: 0 16px;
        margin-bottom: 24px;
    }

    .mobile-grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-grid-card {
        background: white;
        border: 1px solid #E9E9EC;
        border-radius: 16px;
        padding: 12px;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .mobile-grid-card .mobile-product-image {
        display: block;
        aspect-ratio: 1;
        background: #FAFAFB;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .mobile-grid-card .mobile-product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-grid-card .mobile-product-name {
        font-size: 14px;
        font-weight: 500;
        color: #111112;
        line-height: 1.3;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-wrap: break-word;
    }

    /* Sadece iOS cihazları hedeflemek isterseniz veya genel olarak sitenizde uygulayabilirsiniz */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Intercom balonunu mobilde kalıcı gizle */
    .intercom-lightweight-app-launcher,
    .intercom-launcher-frame,
    #intercom-container .intercom-launcher-frame {
        display: none !important;
    }

    .mobile-grid-card .mobile-product-rating {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .mobile-grid-card .mobile-product-stars {
        display: flex;
        align-items: center;
        margin-right: 4px;
    }

    .mobile-grid-card .mobile-product-star {
        width: 14px;
        height: 14px;
        color: #FCD34D;
    }

    .mobile-grid-card .mobile-product-rating-text {
        font-size: 12px;
        color: #8E9099;
    }

    .mobile-grid-card .mobile-product-price-container {
        margin-bottom: 8px;
    }

    .mobile-grid-card .mobile-product-original-price {
        font-size: 12px;
        color: #8E9099;
        text-decoration: line-through;
        margin-bottom: 2px;
    }

    .mobile-grid-card .mobile-product-price {
        font-size: 16px;
        font-weight: 700;
        color: #111112;
    }

    .mobile-grid-card .mobile-product-btn {
        width: 100%;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #E9E9EC;
        border-radius: 999px;
        color: #111112;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-grid-card .mobile-product-btn:hover {
        background: #F6F6F6;
    }
}

/* ==========================================================================
   MOBILE PRODUCT DETAIL PAGE REDESIGN CLASSES
   ========================================================================== */
.mobile-product-skin {
    font-family: 'SF Pro', "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.55px !important;
}

/* Images Full Width */
.mobile-product-images {
    margin-bottom: 16px;
}

.mobile-product-images .mobile-product-image-container {
    padding: 0;
    /* Remove padding to make it full width */
}

.mobile-product-indicator.active {
    background: #ED6B2C !important;
}

/* Info Grid */
.mobile-info-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 0 16px;
    background: white;
}

.mobile-info-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.mobile-info-right {
    margin-left: 16px;
}

.mobile-info-cart-btn {
    width: 48px;
    height: 48px;
    border: 1px solid #ED6B2C;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ED6B2C;
    cursor: pointer;
}

/* Custom Rating Row */
.mobile-custom-rating-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-custom-star {
    width: 14px;
    height: 14px;
    color: #ACACAC;
}

.mobile-custom-star.active {
    color: #ED6B2C;
}

.mobile-custom-rating-text {
    font-size: 13px;
    color: #75777D;
    text-decoration: underline;
    margin-left: 4px;
}

.mobile-custom-seller-text {
    font-size: 13px;
    color: #272B34;
}

.mobile-custom-seller-link {
    color: #ED6B2C;
    font-weight: 500;
}

/* Installment & Delivery Boxes */
.mobile-installment-container {
    background: #FDF0E7;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    margin-left: 16px;
    margin-right: 16px;
    cursor: pointer;
}

.mobile-installment-text {
    font-size: 13px;
    color: #272B34;
    font-weight: 500;
}

.mobile-installment-link {
    font-size: 13px;
    color: #272B34;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-delivery-container {
    background: #F4E7FD;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    margin-left: 16px;
    margin-right: 16px;
}

.mobile-delivery-text {
    font-size: 13px;
    color: #272B34;
    font-weight: 500;
}

.mobile-delivery-highlight {
    color: #9F15FF;
    font-weight: 600;
}

/* Divider */
.mobile-divider {
    height: 1px;
    background-color: #D3D3D3;
    margin: 24px 0;
    width: 100%;
}

/* Restyled Options */
.mobile-product-color-btn {
    border: 1px solid #DEDEDE !important;
    border-radius: 6px !important;
    height: 32px !important;
    color: #272B34 !important;
    font-weight: 500 !important;
}

.mobile-product-color-btn.active {
    border-color: #ED6B2C !important;
    background: #FDF0E7 !important;
    color: #ED6B2C !important;
}

/* Seller Block Redesign */
.mobile-seller-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-seller-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.mobile-seller-block-title {
    color: #272B34;
    font-weight: 500;
}

.mobile-seller-block-name {
    color: #272B34;
    font-weight: 600;
    text-decoration: underline;
}

.mobile-seller-block-desc {
    color: #74777D;
    font-size: 12px;
    line-height: 1.4;
}

.mobile-seller-block-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mobile-seller-block-btn {
    padding: 6px 12px;
    border: 1px solid #DEDEDE !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    color: #272B34 !important;
    background: white !important;
    height: auto !important;
}

/* Delivery Options Block */
.mobile-delivery-opts-title {
    font-size: 14px;
    font-weight: 600;
    color: #272B34;
    margin-bottom: 12px;
}

.mobile-delivery-opts-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-cargo-logo {
    width: 32px;
    height: 32px;
    background: #EE1C25;
    /* Yurtiçi kargo tarzı kırmızı */
    color: white;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.mobile-cargo-text {
    font-size: 13px;
    color: #272B34;
}

/* Payment Methods Block */
.mobile-payment-methods-title {
    font-size: 14px;
    font-weight: 600;
    color: #272B34;
    margin-bottom: 16px;
}

.mobile-payment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.mobile-payment-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #ED6B2C;
}

.mobile-payment-info {
    flex: 1;
}

.mobile-payment-name {
    font-size: 13px;
    font-weight: 600;
    color: #272B34;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-payment-desc {
    font-size: 12px;
    color: #74777D;
    line-height: 1.4;
}

.mobile-payment-badge {
    background: #ED6B2C;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.mobile-payment-badge-purple {
    background: #9F15FF;
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* TAM Korumalı Alışveriş Steps */
.mobile-protection-title {
    font-size: 14px;
    font-weight: 600;
    color: #272B34;
    margin-bottom: 20px;
}

.mobile-protection-step {
    display: flex;
    gap: 16px;
    position: relative;
    margin-bottom: 20px;
}

.mobile-protection-step:last-child {
    margin-bottom: 0;
}

.mobile-protection-step::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 20px;
    bottom: -24px;
    width: 2px;
    background: #FDF0E7;
}

.mobile-protection-step:last-child::before {
    display: none;
}

.mobile-protection-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #ED6B2C;
    position: relative;
    z-index: 2;
    margin-top: 2px;
    flex-shrink: 0;
}

.mobile-protection-content {
    flex: 1;
}

.mobile-protection-bold {
    font-size: 13px;
    font-weight: 600;
    color: #272B34;
    display: block;
    margin-bottom: 2px;
}

.mobile-protection-text {
    font-size: 12px;
    color: #74777D;
    line-height: 1.4;
}
/* ============================================================
   TONDA REDESIGN — Foundation (slice 1, revize 2026-09-30)
   Geri almak için app.css sonundan bu blok silinir / truncate 160475.
   ============================================================ */
:root{
  --brand:#F97316; --brand-600:#EA580C; --brand-050:#FFF4ED;
  --text:#111827; --text-mute:#6B7280; --line:#E5E7EB; --bg:#FFFFFF; --bg-soft:#F9FAFB;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06);
  --shadow:0 4px 16px rgba(17,24,39,.08);
  --shadow-lg:0 10px 30px rgba(17,24,39,.10);
  --ring:0 0 0 3px rgba(249,115,22,.35);
}
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img{ max-width:100%; height:auto; }
::selection{ background:rgba(249,115,22,.18); }
/* Erişilebilir klavye-odak (yalnız :focus-visible; fareyle tıklamada çıkmaz) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; box-shadow:var(--ring); }
/* Tap-target SADECE ana CTA'larda — dot/ikon/küçük butonlara DOKUNULMAZ */
@media (max-width:1024px){
  a.btn, .mobile-product-add-to-cart, .mobile-order-track-btn, .add-to-cart-btn, .mobile-info-cart-btn{ min-height:44px; }
}

/* Ürün açıklaması içindeki Garanti/Doğrulama bilgi kartı */
.tonda-warranty-card{ border:1px solid var(--line)!important; border-radius:var(--radius)!important; background:var(--bg-soft)!important; padding:16px 18px!important; margin:0 0 20px!important; }
.tonda-warranty-card ul{ margin:0; padding-left:18px; }
.tonda-warranty-card li{ margin:6px 0; line-height:1.7; }