html {
    overflow-x: clip;
}

* {
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--background, #f8fafc);
    color: var(--text, #1e293b);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

/* ===== HEADER ===== */
.header {
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

/* ===== STICKY SUBCATEGORY NAV ===== */
.subcat-nav {
    position: sticky;
    top: 60px;
    z-index: 999;
    background: var(--card, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.subcat-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 20px;
}

.subcat-item {
    position: static;
    flex-shrink: 0;
}

.subcat-link {
    display: block;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    opacity: 0.7;
}

.subcat-link:hover,
.subcat-link.active {
    color: var(--primary, #6366f1);
    opacity: 1;
    border-bottom-color: var(--primary, #6366f1);
}

.subcat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card, #fff);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border-top: 2px solid var(--primary, #6366f1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    padding: 20px 24px;
}

.subcat-item:hover .subcat-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.subcat-dropdown-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.subcat-col {
    min-width: 140px;
}

.subcat-col-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1e293b);
    text-decoration: none;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
}

.subcat-col-title:hover,
.subcat-col-title.active {
    color: var(--primary, #6366f1);
}

.subcat-col-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.subcat-col-links a {
    font-size: 13px;
    color: var(--text, #64748b);
    opacity: 0.7;
    text-decoration: none;
    padding: 4px 0;
    transition: all 0.2s;
}

.subcat-col-links a:hover,
.subcat-col-links a.active {
    color: var(--primary, #6366f1);
    opacity: 1;
}

@media (max-width: 768px) {
    .subcat-nav {
        top: 56px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .subcat-nav::-webkit-scrollbar { display: none; }

    .subcat-link {
        padding: 10px 14px;
        font-size: 12px;
    }

    .subcat-dropdown {
        position: fixed;
        top: auto !important;
        left: 0;
        right: 0;
        border-radius: 0;
        max-height: 60vh;
        overflow-y: auto;
    }

    .subcat-dropdown-inner {
        flex-direction: column;
        gap: 16px;
    }
}

.header-top {
    background: var(--gradient);
    color: white;
    padding: 6px 4%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.header-top-desc {
    opacity: 0.9;
}

.header-top .header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin-left: auto;
}

.header-top .header-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
    font-weight: 500;
    background: none;
}

.header-top .header-nav .nav-link:hover,
.header-top .header-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.header-main {
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 20px;
    min-height: 70px;
}

/* ?odeme_link — yalnızca logo, vitrin gürültüsü yok */
body.page-pay-link .header-main {
    justify-content: center;
}
body.page-pay-link .header .logo {
    margin: 0 auto;
}

body.page-pay-link .pay-link-firm {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.page-pay-link .pay-link-firm-logo {
    flex-shrink: 0;
}
body.page-pay-link .pay-link-firm-logo img {
    display: block;
    max-height: 52px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
body.page-pay-link .pay-link-firm-body {
    flex: 1;
    min-width: 200px;
}
body.page-pay-link .pay-link-firm-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f172a;
    margin: 0 0 4px;
    line-height: 1.3;
}
body.page-pay-link .pay-link-firm-desc {
    margin: 0 0 10px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}
body.page-pay-link .pay-link-firm-contact {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #475569;
    line-height: 1.55;
}
body.page-pay-link .pay-link-firm-contact li {
    margin: 0 0 4px;
}
body.page-pay-link .pay-link-firm-contact a {
    color: #0d9488;
    text-decoration: none;
    word-break: break-word;
}
body.page-pay-link .pay-link-firm-contact a:hover {
    text-decoration: underline;
}
body.page-pay-link .pay-link-firm-icon {
    margin-right: 2px;
}
body.page-pay-link .pay-link-firm-address {
    white-space: pre-line;
    margin-top: 2px;
}

body.page-pay-link .pay-link-payer-block {
    color: #475569;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 16px;
}
body.page-pay-link .pay-link-payer-greet {
    margin: 0 0 8px;
}
body.page-pay-link .pay-link-payer-meta {
    margin: 0 0 10px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}
body.page-pay-link .pay-link-payer-meta strong {
    font-weight: 600;
    color: #475569;
    margin-right: 4px;
}
body.page-pay-link .pay-link-payer-sep {
    color: #cbd5e1;
    padding: 0 2px;
}
body.page-pay-link .pay-link-payer-lead {
    margin: 0;
}

/* Header Search (inline in header-main) */
.header-search {
    flex: 1;
    max-width: 500px;
    min-width: 200px;
    display: flex;
    align-items: center;
    position: relative;
}

.header-search-input {
    width: 100%;
    padding: 10px 44px 10px 16px;
    border: 2px solid var(--border, #e2e8f0);
    border-radius: 50px;
    font-size: 14px;
    background: var(--background, #f8fafc);
    color: var(--text, #1e293b);
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
}

.header-search-input:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.header-search-input::placeholder {
    color: #94a3b8;
}

.header-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary, #6366f1);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.header-search-btn:hover {
    background: var(--secondary, #4f46e5);
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    height: 100%; /* Logo container header yüksekliğine uyum sağlar */
}

.logo img {
    height: 60px; /* 45px'den 60px'e büyütüldü */
    width: auto;
    max-height: 60px; /* Maksimum yükseklik sınırı */
    border-radius: var(--radius-sm);
    object-fit: contain; /* Oranları korur */
}

.logo-text h1 {
    font-size: 22px;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text span {
    font-size: 12px;
    color: #64748b;
}

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

.search-box input {
    width: 100%;
    padding: 14px 20px 14px 50px;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    font-size: 15px;
    transition: all 0.3s;
    background: var(--background);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.search-box::before {
    content: '🔍';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* Nav - now lives inside .header-top */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 5px;
}

/* ===== HERO SLIDER ===== */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Önerilen slider boyutu: 1920x600 (3.2:1) veya 1920x500 (3.84:1) */
    /* Görseller bu boyutta hazırlanmalı */
    aspect-ratio: 3.2 / 1;
    max-height: 600px;
    min-height: 300px;
}

.hero-slides {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.hero-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    padding: 60px 5%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--gradient);
    color: white;
}

.hero-slide.with-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    transition: background 0.3s;
}

.hero-slide.with-image::before {
    background: var(--overlay-color, linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%));
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    text-align: left;
    animation: fadeInUp 0.8s ease-out;
}

.hero-content.text-center {
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.hero-content.text-right {
    text-align: right;
    margin-left: auto;
}

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

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

.hero-slide h2 {
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.1;
}

.hero-slide h3 {
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 500;
    margin-bottom: 16px;
    opacity: 0.95;
}

.hero-slide p {
    font-size: clamp(14px, 2vw, 18px);
    margin-bottom: 32px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: white;
    color: var(--primary);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Slider Controls */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-nav:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.hero-nav.prev {
    left: 20px;
}

.hero-nav.next {
    right: 20px;
}

/* Slider Dots */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.hero-dot.active,
.hero-dot:hover {
    background: white;
    transform: scale(1.3);
}

/* Progress Bar */
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
    transition: width 0.1s linear;
}

/* ===== SECTIONS ===== */
.section {
    padding: 10px 3%;
    max-width: 100%;
    margin: 0 auto;
}

/* Products Toolbar - compact single-row header */
.products-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.toolbar-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
}

.toolbar-count {
    font-size: 14px;
    font-weight: 400;
    color: #94a3b8;
}

.toolbar-search {
    display: flex;
    flex: 1;
    min-width: 180px;
    max-width: 400px;
    gap: 8px;
}

.toolbar-search-input {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
    background: var(--background);
}

.toolbar-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.toolbar-search-btn {
    padding: 10px 18px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.toolbar-search-btn:hover {
    background: var(--primary-hover, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.products-toolbar .layout-switcher {
    margin-left: auto;
}

/* Legacy search box (kept for backward compat) */
.products-search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    max-width: 700px;
}

.products-search-input {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 15px;
    transition: all 0.3s;
    background: var(--background);
}

.products-search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.products-search-btn {
    padding: 14px 24px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.products-search-btn:hover {
    background: var(--primary-hover, #4338ca);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

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

.section-header h2 {
    font-size: clamp(24px, 3.8vw, 38px);
    font-weight: 800;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--text);
}

.section-header h3,
.section-header p {
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0 auto;
}

.section-header h3 {
    margin-top: 0;
}

/* ===== CATEGORIES ===== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.category-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.category-card.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.category-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 30px;
}

.category-card img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.category-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.category-card span {
    font-size: 13px;
    color: #94a3b8;
}

/* =============================================
   HOMEPAGE CATEGORIES STYLES (hp-cat-)
   ============================================= */

/* --- Carousel (Yatay Kaydirma) --- */
.hp-cat-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 16px;
    scrollbar-width: thin;
}

.hp-cat-carousel::-webkit-scrollbar { height: 4px; }
.hp-cat-carousel::-webkit-scrollbar-track { background: transparent; }
.hp-cat-carousel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

.hp-cat-carousel-item {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: var(--card, #fff);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--text, #1e293b);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: all 0.3s;
    border: 2px solid transparent;
}

.hp-cat-carousel-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    border-color: var(--primary, #6366f1);
}

.hp-cat-carousel-item.active {
    border-color: var(--primary, #6366f1);
    background: rgba(99,102,241,0.06);
}

.hp-cat-carousel-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.hp-cat-carousel-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--background, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 10px;
}

.hp-cat-carousel-item h3 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-cat-carousel-item span {
    font-size: 11px;
    color: var(--text, #94a3b8);
    opacity: 0.5;
}

/* --- Ana sayfa marka logosu şeridi (gövde arka planıyla aynı, beyaz kutu yok) --- */
.hp-brands-slider {
    background: transparent;
}

.hp-brands-slider .section-header {
    margin-bottom: 14px;
}

.hp-brands-slider .section-header h3,
.hp-brands-slider .section-header p {
    color: var(--text-muted, #64748b);
}

.hp-brands-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    background: var(--background, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: none;
}

.hp-brands-viewport {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 4px 12px;
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.hp-brands-viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.hp-brands-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: max-content;
    padding: 4px 8px;
}

.hp-brand-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 132px;
    padding: 12px 10px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text, #334155);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 38%, var(--border, #e2e8f0));
    box-shadow: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
}

.hp-brand-item:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--primary, #6366f1) 6%, var(--background, #f8fafc));
    border-color: var(--primary, #6366f1);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary, #6366f1) 18%, transparent);
}

.hp-brand-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 8px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--background, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
}

.hp-brand-logo-wrap img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(0.15);
    transition: filter 0.2s;
}

.hp-brand-item:hover .hp-brand-logo-wrap img {
    filter: grayscale(0);
}

.hp-brand-fallback {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    color: var(--primary, #6366f1);
}

.hp-brand-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, #64748b);
}

.hp-brands-nav {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--background, #f8fafc);
    color: var(--text, #334155);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text, #1e293b) 5%, transparent);
}

.hp-brands-nav:hover {
    background: var(--primary, #6366f1);
    color: #fff;
    border-color: transparent;
}

@media (max-width: 640px) {
    .hp-brands-shell {
        gap: 4px;
    }

    .hp-brands-nav {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .hp-brand-item {
        width: 112px;
        padding: 12px 8px;
    }

    .hp-brands-viewport {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* --- Ana sayfa ürün grubu slider (sekmeli); başlık Markalarımız ile aynı .section-header --- */
.hp-product-group-slider .section-header {
    margin-bottom: 14px;
}

.hp-pg-pills-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.hp-pg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.hp-pg-pill {
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--text-muted, #64748b);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hp-pg-pill:hover {
    border-color: color-mix(in srgb, var(--primary, #0d9488) 45%, var(--border, #e2e8f0));
    color: var(--text, #334155);
}

.hp-pg-pill.is-active {
    background: var(--primary, #0d9488);
    border-color: var(--primary, #0d9488);
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary, #0d9488) 35%, transparent);
}

.hp-pg-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.hp-pg-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.hp-pg-track {
    display: flex;
    gap: 16px;
    transition: transform 0.38s ease;
    will-change: transform;
}

.hp-pg-nav {
    flex: 0 0 auto;
    align-self: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--text, #334155);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text, #1e293b) 8%, transparent);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    z-index: 2;
}

.hp-pg-nav:hover {
    background: var(--primary, #0d9488);
    color: #fff;
    border-color: transparent;
}

.hp-pg-card {
    flex: 0 0 auto;
    min-width: 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--text, #1e293b) 6%, transparent);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hp-pg-card-visual {
    position: relative;
    background: var(--background, #f1f5f9);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-pg-card-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hp-pg-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}

.hp-pg-noimg {
    font-size: 2.5rem;
    opacity: 0.35;
}

.hp-pg-wishlist {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border, #e2e8f0);
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hp-pg-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-pg-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.hp-pg-name {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text, #334155);
    flex: 1;
}

.hp-pg-name a {
    color: inherit;
    text-decoration: none;
}

.hp-pg-name a:hover {
    color: var(--primary, #0d9488);
}

.hp-pg-price-row {
    margin-top: 4px;
}

.hp-pg-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.hp-pg-no-price {
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.hp-pg-dealer-msg {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

.hp-pg-dealer-msg a {
    color: var(--primary, #0d9488);
    font-weight: 600;
    text-decoration: none;
}

.hp-pg-dealer-msg a:hover {
    text-decoration: underline;
}

.hp-pg-empty {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted, #64748b);
}

.hp-pg-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.hp-pg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border, #e2e8f0);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.hp-pg-dot.is-active {
    background: var(--primary, #0d9488);
    transform: scale(1.15);
}

@media (max-width: 640px) {
    .hp-pg-nav {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .hp-pg-carousel {
        gap: 4px;
    }
}

/* --- Icon Circle (Yuvarlak Ikon) --- */
.hp-cat-circles {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 16px;
    scrollbar-width: none;
}

.hp-cat-circles::-webkit-scrollbar { display: none; }

.hp-cat-circle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text, #1e293b);
    transition: all 0.3s;
    min-width: 80px;
}

.hp-cat-circle:hover {
    transform: translateY(-3px);
}

.hp-cat-circle-ring {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.08);
    padding: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    background: var(--card, #fff);
}

.hp-cat-circle:hover .hp-cat-circle-ring,
.hp-cat-circle.active .hp-cat-circle-ring {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.hp-cat-circle-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.hp-cat-circle-emoji {
    font-size: 30px;
    line-height: 1;
}

.hp-cat-circle-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Banner Kart --- */
.hp-cat-banners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.hp-cat-banner {
    position: relative;
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background: var(--primary, #6366f1);
    background-size: cover;
    background-position: center;
    transition: all 0.3s;
}

.hp-cat-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.hp-cat-banner.active {
    box-shadow: 0 0 0 3px var(--primary, #6366f1);
}

.hp-cat-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #fff;
}

.hp-cat-banner-overlay h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.hp-cat-banner-overlay span {
    font-size: 13px;
    opacity: 0.8;
}

/* --- Compact List --- */
.hp-cat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.hp-cat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card, #fff);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text, #1e293b);
    transition: all 0.2s;
    border: 1px solid rgba(0,0,0,0.05);
}

.hp-cat-list-item:hover {
    background: var(--background, #f1f5f9);
    border-color: var(--primary, #6366f1);
}

.hp-cat-list-item.active {
    border-color: var(--primary, #6366f1);
    background: rgba(99,102,241,0.06);
}

.hp-cat-list-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background, #f1f5f9);
    border-radius: 8px;
    flex-shrink: 0;
}

.hp-cat-list-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-cat-list-count {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #6366f1);
    border-radius: 12px;
    padding: 2px 10px;
    flex-shrink: 0;
}

/* --- Masonry --- */
.hp-cat-masonry {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    grid-auto-rows: 120px;
}

.hp-cat-masonry-item {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    background: var(--primary, #6366f1);
    transition: all 0.3s;
}

.hp-cat-masonry-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.hp-cat-masonry-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.hp-cat-masonry-item.active {
    box-shadow: 0 0 0 3px var(--primary, #6366f1);
}

.hp-cat-masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-cat-masonry-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
}

.hp-cat-masonry-item.large .hp-cat-masonry-icon {
    font-size: 48px;
}

.hp-cat-masonry-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: #fff;
}

.hp-cat-masonry-info h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 1px;
}

.hp-cat-masonry-item.large .hp-cat-masonry-info h3 {
    font-size: 18px;
}

.hp-cat-masonry-info span {
    font-size: 11px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hp-cat-carousel-item { flex: 0 0 130px; }
    .hp-cat-circle-ring { width: 64px; height: 64px; }
    .hp-cat-banners { grid-template-columns: 1fr; }
    .hp-cat-banner { height: 110px; }
    .hp-cat-list { grid-template-columns: 1fr; }
    .hp-cat-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }
    .hp-cat-masonry-item.large { grid-column: span 2; grid-row: span 1; }
}

/* ===== FILTERS ===== */
.filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    padding: 20px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 10px 20px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text);
}

.filter-tab:hover,
.filter-tab.active {
    border-color: var(--primary);
    background: var(--primary);
}

/* Breadcrumb */
.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    flex-wrap: wrap;
}

.breadcrumb-home {
    font-size: 18px;
    text-decoration: none;
}

.breadcrumb-sep {
    color: #94a3b8;
    font-weight: 300;
}

.breadcrumb-link {
    color: var(--primary, #6366f1);
    text-decoration: none;
    font-weight: 500;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

.breadcrumb-current {
    color: #1e293b;
    font-weight: 600;
}

.breadcrumb-count {
    color: #64748b;
    font-size: 13px;
    margin-left: auto;
}

/* ========================================
           HORIZONTAL CATEGORY MENU
           ======================================== */
.category-horizontal-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding: 10px 0;
}

.cat-pill-wrapper {
    position: relative;
}

.category-horizontal-menu .cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--background, white);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text, #475569);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.category-horizontal-menu .cat-pill:hover {
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.category-horizontal-menu .cat-pill.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.category-horizontal-menu .cat-pill .cat-icon {
    font-size: 16px;
}

.category-horizontal-menu .cat-pill .cat-img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.cat-arrow {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px;
    transition: transform 0.2s;
}

.cat-pill-wrapper:hover .cat-arrow {
    transform: rotate(180deg);
}

/* Submenu */
.cat-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--background, white);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    padding: 8px;
    margin-top: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.cat-pill-wrapper:hover .cat-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cat-sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text, #475569);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.15s;
}

.cat-sub-link:hover {
    background: var(--hover-bg, rgba(99, 102, 241, 0.08));
    color: var(--primary, #6366f1);
}

.cat-sub-link.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
    color: white !important;
}

.cat-sub-link.sub-level-2 {
    padding-left: 30px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.cat-sub-link .cat-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.cat-sub-link .cat-img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.cat-sub-link .cat-name {
    flex: 1;
}

.cat-sub-link .cat-count {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 12px;
    color: var(--text-muted, #64748b);
}

.cat-sub-link.active .cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Submenu Header (mobile) */
.cat-submenu-header {
    display: none;
}

@media (max-width: 768px) {
    .cat-submenu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0 15px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }

    .submenu-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text, #1e293b);
    }

    .submenu-close {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: var(--hover-bg, #f1f5f9);
        border-radius: 50%;
        font-size: 16px;
        color: var(--text-muted, #64748b);
        cursor: pointer;
    }

    .submenu-close:hover {
        background: var(--primary, #6366f1);
        color: white;
    }
}

/* Pills Menu - All flat, no dropdowns */
.category-pills-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
    padding: 10px 0;
}

.category-pills-menu .cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--background, white);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text, #475569);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.category-pills-menu .cat-pill:hover {
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
}

.category-pills-menu .cat-pill.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
    border-color: transparent;
    color: white !important;
}

.category-pills-menu .cat-pill.level-1 {
    font-size: 12px;
    padding: 6px 12px;
    opacity: 0.9;
}

.category-pills-menu .cat-pill.level-2 {
    font-size: 11px;
    padding: 5px 10px;
    opacity: 0.8;
}

.category-pills-menu .cat-pill .cat-icon {
    font-size: 14px;
}

.category-pills-menu .cat-pill .cat-img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
}

.cat-count-small {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--text-muted, #64748b);
}

.category-pills-menu .cat-pill.active .cat-count-small {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Mobile: Horizontal menu scrolls */
@media (max-width: 768px) {
    .category-horizontal-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-horizontal-menu::-webkit-scrollbar {
        display: none;
    }

    .category-horizontal-menu .cat-pill {
        padding: 8px 14px;
        font-size: 13px;
    }

    .cat-submenu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 60vh;
        overflow-y: auto;
        padding: 20px;
        padding-bottom: 30px;
        margin-top: 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: all 0.3s ease;
    }

    .cat-pill-wrapper.submenu-open .cat-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Desktop hover - disable on mobile */
    @media (min-width: 769px) {
        .cat-pill-wrapper:hover .cat-submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    .category-horizontal-menu .layout-switcher,
    .category-pills-menu .layout-switcher {
        display: none;
    }

    /* Pills menu mobile scroll */
    .category-pills-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-pills-menu::-webkit-scrollbar {
        display: none;
    }

    /* Mobile overlay for submenu */
    .cat-submenu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s;
    }

    .cat-submenu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ========================================
           SIMPLE CATEGORY MENU
           ======================================== */
.category-menu-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
}

/* Toggle Button - Desktop: Always visible dropdown trigger */
.category-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--background, white);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text, #1e293b);
    transition: all 0.2s;
}

.category-toggle-btn:hover {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.category-menu-wrapper.open .category-toggle-btn {
    border-color: var(--primary, #6366f1);
    background: var(--primary, #6366f1);
    color: white;
}

.toggle-icon {
    font-size: 18px;
}

.toggle-text {
    flex: 1;
}

.toggle-arrow {
    font-size: 12px;
    opacity: 0.6;
    transition: transform 0.3s;
}

.category-menu-wrapper.open .toggle-arrow {
    transform: rotate(180deg);
}

/* Category Dropdown */
.category-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--background, white);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 10px;
    margin-top: 8px;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 4px;
}

.category-menu-wrapper.open .category-dropdown {
    display: flex;
    animation: dropdownFadeIn 0.2s ease;
}

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

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

/* Category Link */
.cat-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text, #475569);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.cat-link:hover {
    background: var(--hover-bg, rgba(99, 102, 241, 0.08));
    color: var(--primary, #6366f1);
}

.cat-link.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), #8b5cf6);
    color: white !important;
}

.cat-link.cat-main {
    background: linear-gradient(135deg, var(--primary-light, rgba(99, 102, 241, 0.1)), var(--primary-lighter, rgba(99, 102, 241, 0.15)));
    color: var(--primary, #6366f1);
    margin-bottom: 5px;
    border-left: 3px solid var(--primary, #6366f1);
}

.cat-link.cat-main:hover {
    background: linear-gradient(135deg, var(--primary-light, rgba(99, 102, 241, 0.15)), var(--primary-lighter, rgba(99, 102, 241, 0.2)));
}

.cat-link.cat-main.active {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
    color: white !important;
    border-left-color: transparent;
}

.cat-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.cat-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--hover-bg, #f1f5f9);
}

.cat-img[src=""],
.cat-img:not([src]) {
    display: none !important;
}

.cat-link.active .cat-img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.cat-name {
    flex: 1;
}

.cat-count {
    font-size: 11px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted, #64748b);
    padding: 3px 10px;
    border-radius: 20px;
}

.cat-link.active .cat-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.layout-switcher {
    display: flex;
    gap: 5px;
    background: var(--background);
    padding: 5px;
    border-radius: var(--radius-sm);
}

.layout-btn {
    padding: 10px 15px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.layout-btn.active {
    background: var(--primary);
    color: white;
}

/* ===== PRODUCTS GRID ===== */
.products-grid {
    display: grid;
    gap: 25px;
}

.products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.products-grid.layout-list {
    grid-template-columns: 1fr;
}

.products-grid.layout-masonry {
    columns: 3;
    column-gap: 25px;
}

.products-grid.layout-masonry .product-card {
    break-inside: avoid;
    margin-bottom: 25px;
}

/* ===== PRODUCT CARD ===== */
.product-card {
    background: var(--card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.products-grid.layout-grid .product-card,
.products-grid.layout-list .product-card {
    height: 100%;
}

.product-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.layout-list .product-card {
    flex-direction: row;
}

.layout-list .product-image {
    width: 280px;
    min-width: 280px;
    height: 200px;
}

.layout-list .product-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.layout-list .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}

/* Liste görünümünde açıklama stilleri */
.product-description-wrapper {
    margin-bottom: 16px;
}

.product-short-desc {
    margin-bottom: 12px;
    font-weight: 500;
    color: #555;
}

.product-full-description {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.full-desc-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.full-desc-content {
    font-size: 13px;
    color: #64748b;
    line-height: 1.7;
    max-height: 150px;
    overflow-y: auto;
    padding: 10px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid var(--primary, #6366f1);
}

.full-desc-content::-webkit-scrollbar {
    width: 5px;
}

.full-desc-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.full-desc-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.full-desc-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Grid görünümünde detaylı açıklamayı gizle */
.products-grid.layout-grid .product-full-description,
.products-grid.layout-masonry .product-full-description {
    display: none;
}

/* Liste görünümünde göster */
.products-grid.layout-list .product-full-description {
    display: block;
}

/* Liste görünümünde açıklama alanını genişlet */
.layout-list .product-description {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout-list .product-short-desc {
    -webkit-line-clamp: 2;
}

/* Layout özel stiller - Liste görünümü */
body.layout-trendyol .layout-list .full-desc-content {
    background: #fafafa;
    border-left-color: #ff6000;
}

body.layout-trendyol .layout-list .full-desc-title {
    color: #333;
}

body.layout-shopify .layout-list .full-desc-content {
    background: #f9fafb;
    border-left-color: #5a67d8;
}

body.layout-butik .layout-list .full-desc-content {
    background: #fafafa;
    border-left-color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}

body.layout-butik .layout-list .full-desc-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Responsive - Liste görünümü */
@media (max-width: 768px) {
    .layout-list .product-full-description {
        margin-top: 10px;
        padding-top: 10px;
    }

    .full-desc-content {
        max-height: 120px;
        font-size: 12px;
    }

    .full-desc-title {
        font-size: 12px;
    }
}

/* Product Image */
.product-image {
    position: relative;
    height: 280px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    overflow: hidden;
}

.slider-container {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease;
}

.slider-image {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

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

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s;
    box-shadow: var(--shadow);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card:hover .slider-btn {
    opacity: 1;
}

.slider-btn.prev {
    left: 12px;
}

.slider-btn.next {
    right: 12px;
}

.slider-btn:hover {
    background: var(--primary);
    color: white;
}

.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

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

.slider-dot.active {
    background: white;
    transform: scale(1.2);
}

.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 60px;
    color: #cbd5e1;
}

/* Badges */
.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 8;
    pointer-events: none;
}

.product-badges .badge {
    pointer-events: auto;
}

.badges-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    line-height: 1.3;
}

.badge-featured {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

.badge-stock {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.badge-stock.in {
    color: #059669;
}

.badge-stock.out {
    color: #dc2626;
}

.badge-discount {
    background: #dc2626;
    color: white;
    box-shadow: 0 2px 6px rgba(220,38,38,0.3);
    flex-shrink: 0;
}

.image-count {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 12px;
    z-index: 8;
}

/* Product Info */
.product-info {
    padding: 24px;
    cursor: pointer;
    transition: background 0.2s;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-info:hover {
    background: rgba(0, 0, 0, 0.02);
}

.product-category {
    display: inline-block;
    padding: 5px 14px;
    background: var(--background);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 12px;
}

.product-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: -4px;
}

.product-brand-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.04);
}

.product-brand-name {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.3;
}

.product-detail-info .product-detail-brand {
    margin-top: 8px;
    margin-bottom: 16px;
}

.product-detail-brand-logo {
    width: 28px;
    height: 28px;
}

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

.product-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.product-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
}

.product-price .old-price {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 8px;
    font-weight: 500;
}

.product-price .tax-badge {
    font-size: 11px;
    font-weight: 600;
    color: #f59e0b;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.no-price {
    font-size: 14px;
    color: #64748b;
    font-style: italic;
}

.product-btn {
    padding: 12px 24px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.product-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.4);
}

.product-btn-details {
    padding: 10px 20px;
    background: transparent;
    color: var(--primary, #6366f1);
    border: 2px solid var(--primary, #6366f1);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 12px;
    width: 100%;
}

.product-btn-details:hover {
    background: var(--primary, #6366f1);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.product-footer {
    flex-direction: column;
    align-items: stretch;
}

.product-footer .product-price,
.product-footer .no-price {
    margin-bottom: 8px;
}

/* Layout özel stiller */
body.layout-trendyol .product-btn-details {
    font-size: 12px;
    padding: 8px 16px;
}

body.layout-shopify .product-btn-details {
    border-radius: 6px;
}

body.layout-butik .product-btn-details {
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .product-btn-details {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* ===== ABOUT ===== */
/* ===== KURUMSAL FOOTER ===== */
.corp-footer {
    background: var(--text, #1e293b);
    color: var(--background, #f8fafc);
    margin-top: 60px;
}

.corp-footer-main {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 4% 40px;
}

.corp-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 40px;
}

.corp-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.corp-footer-logo img {
    height: 42px;
    width: auto;
    border-radius: 8px;
}

.corp-footer-logo span {
    font-size: 20px;
    font-weight: 700;
    color: inherit;
    letter-spacing: -0.3px;
}

.corp-footer-desc {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.6;
    margin-bottom: 24px;
}

.corp-social {
    display: flex;
    gap: 10px;
}

.corp-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(128,128,128,0.15);
    color: inherit;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s;
}

.corp-social-btn:hover {
    background: var(--primary, #4f46e5);
    color: var(--background, #fff);
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.corp-footer-heading {
    font-size: 15px;
    font-weight: 700;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}

.corp-footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--primary, #4f46e5);
    border-radius: 3px;
}

.corp-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.corp-footer-nav li {
    margin-bottom: 12px;
}

.corp-footer-nav a {
    color: inherit;
    opacity: 0.6;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.corp-footer-nav a::before {
    content: '›';
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
    color: var(--primary, #4f46e5);
    font-weight: 700;
}

.corp-footer-nav a:hover {
    opacity: 1;
    padding-left: 4px;
}

.corp-footer-nav a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.corp-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.corp-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.corp-contact-icon {
    width: 38px;
    height: 38px;
    background: rgba(128,128,128,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.corp-contact-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.45;
    margin-bottom: 3px;
    font-weight: 600;
}

.corp-footer-contact a,
.corp-footer-contact p {
    color: inherit;
    opacity: 0.75;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    transition: opacity 0.2s;
}

.corp-footer-contact a:hover {
    opacity: 1;
}

.corp-footer-map {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(128,128,128,0.15);
}

.corp-footer-map iframe {
    border-radius: 12px;
}

.corp-footer-bottom {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(128,128,128,0.15);
}

.footer-copyright {
    font-size: 12px;
    color: inherit;
    opacity: 0.4;
    margin: 0;
}

.footer-brand {
    margin-left: auto;
}

.cefexa-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.cefexa-link:hover {
    opacity: 0.7;
}

.cefexa-logo {
    height: 18px;
    width: auto;
}

.cefexa-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .corp-footer-main {
        padding: 40px 20px 30px;
    }

    .corp-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .corp-footer-about {
        text-align: center;
    }

    .corp-footer-logo {
        justify-content: center;
    }

    .corp-social {
        justify-content: center;
    }

    .corp-footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .corp-footer-nav {
        text-align: center;
    }

    .corp-footer-nav a::before {
        display: none;
    }

    .corp-footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 10px 15px;
    }

    .footer-brand {
        margin-left: 0;
    }

    .corp-footer-map iframe {
        height: 200px !important;
    }
}

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    grid-column: 1 / -1;
}

.empty-state span {
    font-size: 80px;
    display: block;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: var(--text);
}

.empty-state p {
    color: #64748b;
}

/* ===== INFINITE SCROLL ===== */
.infinite-scroll-status {
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
}

.product-count {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--primary);
    font-size: 14px;
}

.loading-indicator.hidden {
    display: none;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.all-loaded {
    color: #10b981;
    font-size: 14px;
    font-weight: 500;
}

/* ===== SCROLL TO TOP ===== */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-5px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .products-grid.layout-masonry {
        columns: 2;
    }
}

/* ===== BÜYÜK EKRANLAR ===== */
@media (min-width: 1600px) {
    .products-grid.layout-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .categories-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .section {
        padding: 10px 3%;
    }
}

@media (min-width: 2000px) {
    .products-grid.layout-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;
    }
}

@media (max-width: 768px) {

    /* Tüm layout'larda mobilde 2 sütun zorunlu */
    .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .header-top {
        padding: 4px 15px;
        font-size: 11px;
    }

    .header-top .header-nav {
        display: none;
    }

    .header-top-desc:only-child {
        text-align: center;
        width: 100%;
    }

    .header-main {
        padding: 10px 15px;
        gap: 8px;
        flex-wrap: wrap !important;
    }

    .header-search {
        order: 10;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .header-search-input {
        padding: 9px 40px 9px 14px;
        font-size: 13px;
    }

    .header-search-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .logo {
        flex: 1;
        min-width: 0;
        overflow: clip;
    }

    .logo img {
        height: 40px;
        max-height: 40px;
    }

    .logo img + .logo-text {
        display: none;
    }

    .logo-text h1 {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-actions {
        flex-shrink: 0;
        margin-left: 0;
        gap: 6px;
    }

    .search-box {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
        flex-shrink: 0;
    }

    .product-badges {
        top: 6px;
        left: 6px;
        right: 6px;
    }

    .badge {
        padding: 3px 8px;
        font-size: 10px;
    }

    .badges-left {
        gap: 4px;
    }

    .hero-slide {
        padding: 60px 20px;
    }

    .hero-slide h2 {
        font-size: 28px;
    }

    .hero-slide h3 {
        font-size: 18px;
    }

    .hero-nav {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

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

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

    .hero-dots {
        bottom: 20px;
    }

    .section {
        padding: 10px 3%;
    }

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

    .section-header h2 {
        font-size: clamp(20px, 5.2vw, 30px);
        margin-bottom: 4px;
    }

    .section-header h3,
    .section-header p {
        font-size: 12px;
        line-height: 1.4;
        padding: 0 8px;
    }

    .hp-brands-slider .section-header {
        margin-bottom: 12px;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-tabs {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-tabs a {
        font-size: 12px;
        padding: 8px 14px;
    }

    .layout-switcher {
        justify-content: center;
    }

    .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .products-grid.layout-list .product-card {
        flex-direction: column;
    }

    .products-grid.layout-list .product-image {
        width: 100%;
        height: 200px;
    }

    .products-grid.layout-masonry {
        columns: 2;
        column-gap: 15px;
    }

    .product-image {
        height: 200px;
    }

    .product-info {
        padding: 16px;
    }

    .product-name {
        font-size: 15px;
    }

    .product-price {
        font-size: 18px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-card {
        padding: 20px 15px;
    }

    .category-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

}

@media (max-width: 480px) {

    /* Tüm layout'larda küçük mobilde 1 sütun zorunlu */
    .products-grid.layout-grid {
        grid-template-columns: 1fr !important;
    }

    body.layout-shopify .products-grid.layout-grid,
    body.layout-butik .products-grid.layout-grid,
    body.layout-trendyol .products-grid.layout-grid {
        grid-template-columns: 1fr !important;
    }

    .products-grid.layout-masonry {
        columns: 1;
    }

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

}

/* ===== MOBILE MENU ===== */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    z-index: 2000;
    padding: 20px;
    flex-direction: column;
}

.mobile-nav.open {
    display: flex;
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-shrink: 0;
}

.mobile-nav-close {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
}

.mobile-search {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    font-size: 16px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

.mobile-nav-links a {
    padding: 15px 20px;
    background: var(--background);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

.mobile-nav-links a.active {
    background: var(--gradient);
    color: white;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.product-card {
    animation: fadeIn 0.5s ease forwards;
}

.product-card:nth-child(1) {
    animation-delay: 0.1s;
}

.product-card:nth-child(2) {
    animation-delay: 0.15s;
}

.product-card:nth-child(3) {
    animation-delay: 0.2s;
}

.product-card:nth-child(4) {
    animation-delay: 0.25s;
}

.product-card:nth-child(5) {
    animation-delay: 0.3s;
}

.product-card:nth-child(6) {
    animation-delay: 0.35s;
}

/* ============================================
           SHOPIFY MINIMAL LAYOUT
           Temiz, modern, minimal e-ticaret tasarımı
           ============================================ */
body.layout-shopify {
    background: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.layout-shopify .header {
    background: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid #e8e8e8;
}

body.layout-shopify .header-top {
    background: #1a1a1a;
    color: #ffffff;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 8px 20px;
    text-transform: uppercase;
}

body.layout-shopify .header-main {
    padding: 20px 5%;
    max-width: 100%;
    margin: 0 auto;
}

body.layout-shopify .logo img {
    max-height: 45px;
}

body.layout-shopify .logo h1 {
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a1a1a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-shopify .search-box input {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fafafa;
    font-size: 13px;
}

body.layout-shopify .search-box input:focus {
    border-color: #1a1a1a;
    box-shadow: none;
}

body.layout-shopify .header-top .nav-link {
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Hero - Shopify */
body.layout-shopify .hero-slider {
    height: 65vh;
    min-height: 400px;
    max-height: 600px;
    border-radius: 0;
    margin: 0;
}

body.layout-shopify .hero-slide {
    padding: 60px 8%;
    align-items: center;
    justify-content: center;
}

body.layout-shopify .hero-content {
    text-align: center;
    max-width: 700px;
}

body.layout-shopify .hero-slide h3 {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0.9;
}

body.layout-shopify .hero-slide h2 {
    font-weight: 300;
    font-size: clamp(28px, 5vw, 52px);
    letter-spacing: 1px;
    line-height: 1.2;
    margin-bottom: 16px;
}

body.layout-shopify .hero-slide p {
    font-size: 15px;
    font-weight: 300;
    max-width: 500px;
    margin: 0 auto 24px;
    opacity: 0.9;
}

body.layout-shopify .hero-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: white;
    border-radius: 0;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 11px;
    padding: 14px 36px;
    transition: all 0.3s ease;
}

body.layout-shopify .hero-btn:hover {
    background: white;
    color: #1a1a1a;
    transform: none;
}

body.layout-shopify .hero-nav {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    font-size: 16px;
}

body.layout-shopify .hero-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.layout-shopify .hero-dots .hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.4);
}

body.layout-shopify .hero-dots .hero-dot.active {
    background: white;
    width: 24px;
}

/* Sections - Shopify */
body.layout-shopify .section {
    padding: 80px 5%;
    max-width: 100%;
    margin: 0 auto;
}

body.layout-shopify .section-header {
    margin-bottom: 28px;
}

body.layout-shopify .section-header h2 {
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 1px;
    margin-bottom: 6px;
    color: #1a1a1a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-shopify .section-header h3,
body.layout-shopify .section-header p {
    font-size: 12px;
    line-height: 1.45;
    color: #666;
    margin-top: 0;
}

body.layout-shopify .toolbar-title {
    font-weight: 400;
    letter-spacing: 1px;
    color: #1a1a1a;
}

/* Products - Shopify */
body.layout-shopify .products-wrapper {
    display: block;
}

body.layout-shopify .products-main {
    width: 100%;
}

body.layout-shopify .products-grid {
    gap: 24px;
    display: grid !important;
}

body.layout-shopify .products-grid.layout-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

body.layout-shopify .product-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

body.layout-shopify .product-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: none;
    border-color: #1a1a1a;
}

/* Shopify - Butonlar tema uyumlu */
body.layout-shopify .btn-add-cart {
    border-radius: 0;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.layout-shopify .btn-quick-view {
    border-radius: 0;
    border-width: 1px !important;
}

body.layout-shopify .product-image {
    height: 300px;
    border-radius: 0;
    overflow: hidden;
}

body.layout-shopify .product-image img {
    transition: transform 0.6s ease;
}

body.layout-shopify .product-card:hover .product-image img {
    transform: scale(1.05);
}

body.layout-shopify .product-info {
    padding: 20px;
    text-align: center;
    background: #fff;
}

body.layout-shopify .product-category {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    background: none;
    padding: 0;
}

body.layout-shopify .product-name {
    font-weight: 400;
    font-size: 15px;
    margin: 8px 0;
    color: #1a1a1a;
}

body.layout-shopify .product-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.layout-shopify .product-price {
    font-weight: 400;
    font-size: 16px;
    color: #1a1a1a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-shopify .old-price {
    color: #999;
    font-size: 13px;
}

body.layout-shopify .badge {
    border-radius: 0;
    font-size: 10px;
    letter-spacing: 1px;
}

/* Filter tabs - Shopify */
body.layout-shopify .filter-tabs {
    gap: 8px;
    margin-bottom: 40px;
}

body.layout-shopify .filter-tabs a {
    border-radius: 0;
    border: 1px solid #e8e8e8;
    background: transparent;
    color: #1a1a1a;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 20px;
}

body.layout-shopify .filter-tabs a:hover,
body.layout-shopify .filter-tabs a.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* Categories - Shopify */
body.layout-shopify .categories-grid {
    gap: 20px;
}

body.layout-shopify .category-card {
    border-radius: 0;
    border: 1px solid #e8e8e8;
    padding: 30px 20px;
}

body.layout-shopify .category-card:hover {
    border-color: #1a1a1a;
    transform: none;
}

body.layout-shopify .category-icon {
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border-radius: 0;
}

/* Footer - Shopify: tema renklerinden otomatik */

/* ============================================
           TRENDYOL LAYOUT
           E-ticaret odaklı, kampanya ve satış vurgulu
           ============================================ */
body.layout-trendyol {
    background: #f5f5f5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body.layout-trendyol .header {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.layout-trendyol .header-top {
    background: linear-gradient(90deg, #ff6000 0%, #ff8533 100%);
    color: white;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 20px;
}

body.layout-trendyol .header-main {
    padding: 12px 4%;
    max-width: 100%;
    margin: 0 auto;
}

body.layout-trendyol .logo img {
    max-height: 40px;
}

body.layout-trendyol .logo h1 {
    color: #ff6000;
    font-weight: 700;
    font-size: 26px;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-trendyol .search-box {
    flex: 1;
    max-width: 600px;
    margin: 0 30px;
}

body.layout-trendyol .search-box input {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
}

body.layout-trendyol .search-box input:focus {
    border-color: #ff6000;
}

body.layout-trendyol .header-top .nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Hero - Trendyol */
body.layout-trendyol .hero-slider {
    height: auto;
    min-height: 280px;
    max-height: 400px;
    border-radius: 0;
    margin: 0;
}

body.layout-trendyol .hero-slide {
    padding: 40px 5%;
}

body.layout-trendyol .hero-content {
    max-width: 500px;
}

body.layout-trendyol .hero-slide h3 {
    font-size: 14px;
    font-weight: 600;
    background: #ff6000;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}

body.layout-trendyol .hero-slide h2 {
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

body.layout-trendyol .hero-slide p {
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0.9;
}

body.layout-trendyol .hero-btn {
    background: #ff6000;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 32px;
}

body.layout-trendyol .hero-btn:hover {
    background: #e65500;
    transform: none;
    box-shadow: 0 4px 15px rgba(255, 96, 0, 0.3);
}

body.layout-trendyol .hero-nav {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border-radius: 50%;
    font-size: 18px;
}

body.layout-trendyol .hero-dots .hero-dot {
    background: rgba(255, 255, 255, 0.5);
}

body.layout-trendyol .hero-dots .hero-dot.active {
    background: #ff6000;
}

/* Sections - Trendyol */
body.layout-trendyol {
    background: #f5f5f5;
}

body.layout-trendyol .section {
    background: #fff;
    margin: 8px auto;
    max-width: 100%;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

body.layout-trendyol .section-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #333;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-trendyol .section-header h3,
body.layout-trendyol .section-header p {
    font-size: 12px;
    line-height: 1.45;
    font-weight: 400;
    color: #666;
}

body.layout-trendyol .toolbar-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/* Products - Trendyol */
body.layout-trendyol .products-grid {
    gap: 12px;
}

body.layout-trendyol .products-grid.layout-grid {
    grid-template-columns: repeat(5, 1fr);
}

body.layout-trendyol .product-card {
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

body.layout-trendyol .product-card:hover {
    border-color: #ff6000;
    box-shadow: 0 4px 20px rgba(255, 96, 0, 0.12);
    transform: translateY(-2px);
}

/* Trendyol - Butonlar tema uyumlu */
body.layout-trendyol .btn-add-cart {
    background: #ff6000;
    box-shadow: 0 2px 8px rgba(255, 96, 0, 0.3);
}

body.layout-trendyol .btn-add-cart:hover {
    background: #e65500;
    box-shadow: 0 4px 12px rgba(255, 96, 0, 0.4);
}

body.layout-trendyol .btn-quick-view {
    border-color: #ff6000 !important;
    color: #ff6000;
}

body.layout-trendyol .btn-quick-view:hover {
    background: #ff6000;
    color: white;
}

/* Hızlı Bakış efekti - Tıklanabilir */
body.layout-trendyol .quick-view-trigger {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ff6000 0%, #ff8533 100%);
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    transition: bottom 0.3s ease;
    z-index: 10;
    cursor: pointer;
}

body.layout-trendyol .quick-view-trigger::before {
    content: '🔍 Hızlı Bakış';
}

body.layout-trendyol .product-card:hover .quick-view-trigger {
    bottom: 0;
}

body.layout-trendyol .quick-view-trigger:hover {
    background: linear-gradient(90deg, #e65500 0%, #ff6600 100%);
}

/* Diğer layoutlarda gizle */
.quick-view-trigger {
    display: none;
}

body.layout-trendyol .quick-view-trigger {
    display: block;
}

body.layout-trendyol .product-image {
    height: 200px;
    border-radius: 8px 8px 0 0;
}

body.layout-trendyol .product-info {
    padding: 12px;
    padding-bottom: 16px;
}

body.layout-trendyol .product-category {
    font-size: 11px;
    color: #888;
    background: none;
    padding: 0;
    margin-bottom: 4px;
}

body.layout-trendyol .product-name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    height: 34px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 4px 0 8px;
}

body.layout-trendyol .product-description {
    font-size: 12px;
    color: #666;
    margin: 6px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.layout-trendyol .product-price {
    color: #ff6000;
    font-weight: 700;
    font-size: 18px;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-trendyol .old-price {
    color: #999;
    font-size: 13px;
    margin-left: 6px;
}

body.layout-trendyol .badge {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 4px 8px;
}

body.layout-trendyol .badge-discount {
    background: #d93030;
}

/* Filter - Trendyol */
body.layout-trendyol .filter-tabs a {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
    padding: 8px 18px;
}

body.layout-trendyol .filter-tabs a:hover,
body.layout-trendyol .filter-tabs a.active {
    border-color: #ff6000;
    color: #ff6000;
    background: #fff5f0;
}

/* Categories - Trendyol */
body.layout-trendyol .category-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    background: #fff;
}

body.layout-trendyol .category-card:hover {
    border-color: #ff6000;
    box-shadow: 0 4px 15px rgba(255, 96, 0, 0.1);
}

body.layout-trendyol .category-icon {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe8db 100%);
}

/* Footer - Trendyol */
/* Trendyol footer: tema renklerinden otomatik */

/* ============================================
           KAMPANYA BANNER SİSTEMİ
           ============================================ */

.campaign-banner {
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    overflow: hidden;
    position: relative;
}

.campaign-banner:not(.has-image) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.campaign-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.campaign-banner.has-image {
    padding: 0;
    background: transparent !important;
    min-height: 200px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.campaign-banner.has-image .campaign-banner-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    z-index: 0;
}

.campaign-banner.has-image .campaign-banner-scrim {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

.campaign-banner.has-image .campaign-banner-content {
    padding: 24px 20px;
    width: 100%;
    box-sizing: border-box;
}

.campaign-banner.has-image h4,
.campaign-banner.has-image p {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.campaign-banner-content {
    position: relative;
    z-index: 2;
}

.campaign-banner h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.campaign-banner p {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.campaign-banner .btn-campaign {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.3s;
}

.campaign-banner:hover .btn-campaign {
    background: rgba(255, 255, 255, 0.3);
}

/* Ana banner (hero altı) */
.campaign-banner-main {
    border-radius: 12px;
    margin: 0 3% 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.campaign-banner-main.has-image {
    padding: 0;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 1;
}

.campaign-banner-main:not(.has-image) {
    padding: 25px 30px;
}

/* Banner boyut varyantlari */
.campaign-banner-main.banner-compact.has-image {
    aspect-ratio: 6 / 1;
}

.campaign-banner-main.banner-normal.has-image {
    aspect-ratio: 4 / 1;
}

.campaign-banner-main.banner-wide.has-image {
    aspect-ratio: 3 / 1;
}

.campaign-banner-main .campaign-banner-content {
    padding: 25px 30px;
    position: relative;
    z-index: 2;
}

.campaign-banner-main h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.campaign-banner-main p {
    font-size: 16px;
    opacity: 0.9;
}

.campaign-banner-main .btn-campaign {
    padding: 12px 30px;
    font-size: 14px;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

/* Kompakt banner: daha kucuk yazi */
.campaign-banner-main.banner-compact h3 {
    font-size: 20px;
}
.campaign-banner-main.banner-compact p {
    font-size: 14px;
}
.campaign-banner-main.banner-compact .btn-campaign {
    padding: 8px 20px;
    font-size: 13px;
}
.campaign-banner-main.banner-compact .campaign-banner-content {
    padding: 15px 25px;
}

/* Genis banner: daha buyuk yazi */
.campaign-banner-main.banner-wide h3 {
    font-size: 30px;
}
.campaign-banner-main.banner-wide p {
    font-size: 18px;
}
.campaign-banner-main.banner-wide .btn-campaign {
    padding: 14px 36px;
    font-size: 16px;
}
.campaign-banner-main.banner-wide .campaign-banner-content {
    padding: 35px 40px;
}

/* Alt bannerlar */
.campaign-banners-bottom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 10px 3% 20px;
    padding: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    body.layout-trendyol .products-wrapper {
        gap: 20px;
    }
}

@media (max-width: 992px) {
    body.layout-trendyol .products-wrapper {
        flex-direction: column;
    }

    .campaign-banner-main {
        display: block;
    }
}

@media (max-width: 768px) {
    .campaign-banner-main {
        flex-direction: column;
        text-align: center;
    }

    .campaign-banner-main:not(.has-image) {
        padding: 20px;
    }

    .campaign-banner-main.has-image {
        aspect-ratio: 3 / 1;
    }

    .campaign-banner-main.banner-compact.has-image {
        aspect-ratio: 4 / 1;
    }

    .campaign-banner-main h3 {
        font-size: 18px;
    }

    .campaign-banner-main p {
        font-size: 13px;
    }

    .campaign-banner-main .campaign-banner-content {
        padding: 15px 20px;
    }

    .campaign-banners-bottom {
        grid-template-columns: 1fr;
    }
}

/* ============================================
           BUTIK / MODA LAYOUT
           Lookbook tarzı, elegant ve şık tasarım
           ============================================ */
body.layout-butik {
    background: #fafafa;
}

body.layout-butik .header {
    background: #1a1a1a;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Butik - Sayfa bazlı header (artık tüm sayfalarda sticky #1a1a1a) */

body.layout-butik.page-cart .logo h1,
body.layout-butik.page-checkout .logo h1,
body.layout-butik.page-account .logo h1,
body.layout-butik.page-order .logo h1,
body.layout-butik.page-login .logo h1 {
    color: #fff !important;
    text-shadow: none !important;
}

body.layout-butik.page-cart .logo img,
body.layout-butik.page-checkout .logo img,
body.layout-butik.page-account .logo img,
body.layout-butik.page-order .logo img,
body.layout-butik.page-login .logo img {
    filter: brightness(0) invert(1) !important;
}


body.layout-butik .header-top {
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.layout-butik .header-top-desc {
    color: rgba(255, 255, 255, 0.7);
}

body.layout-butik .header-main {
    padding: 24px 5%;
}

body.layout-butik .logo img {
    max-height: 50px;
    filter: brightness(0) invert(1);
}

body.layout-butik .logo h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-butik .search-box {
    display: none;
}

body.layout-butik .header-search-input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.layout-butik .header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

body.layout-butik .header-search-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

body.layout-butik .header-account,
body.layout-butik .header-cart {
    color: #fff;
}

body.layout-butik .header-top .nav-link {
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Hero - Butik */
body.layout-butik .hero-slider {
    height: 100vh;
    min-height: 600px;
    max-height: none;
    border-radius: 0;
    margin: 0;
}

body.layout-butik .hero-slide {
    padding: 0 8%;
    padding-top: 120px;
    align-items: center;
    justify-content: center;
}

body.layout-butik .hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
}

body.layout-butik .hero-content {
    text-align: center;
    max-width: 800px;
    position: relative;
    z-index: 2;
}

body.layout-butik .hero-slide h3 {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    opacity: 0.9;
}

body.layout-butik .hero-slide h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(36px, 7vw, 72px);
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 20px;
}

body.layout-butik .hero-slide p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    max-width: 500px;
    margin: 0 auto 30px;
    opacity: 0.9;
}

body.layout-butik .hero-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11px;
    padding: 18px 50px;
    transition: all 0.4s ease;
}

body.layout-butik .hero-btn:hover {
    background: white;
    color: #1a1a1a;
    border-color: white;
    transform: none;
}

body.layout-butik .hero-nav {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 0;
    font-size: 18px;
}

body.layout-butik .hero-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

body.layout-butik .hero-dots {
    bottom: 40px;
}

body.layout-butik .hero-dots .hero-dot {
    width: 30px;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.3);
}

body.layout-butik .hero-dots .hero-dot.active {
    background: white;
}

body.layout-butik .hero-progress {
    display: none;
}

/* Sections - Butik */
body.layout-butik .section {
    padding: 80px 40px;
    max-width: 100%;
    margin: 0;
}

body.layout-butik .section-header {
    text-align: center;
    margin-bottom: 36px;
}

body.layout-butik .section-header h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    color: #1a1a1a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}

body.layout-butik .section-header h3,
body.layout-butik .section-header p {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #888;
    margin-top: 0;
}

body.layout-butik .toolbar-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 1px;
    color: #1a1a1a;
}

body.layout-butik .toolbar-search-input {
    border-radius: 0;
    border-width: 1px;
}

body.layout-butik .toolbar-search-btn {
    border-radius: 0;
}

/* Products - Butik */
body.layout-butik .products-wrapper {
    display: block;
}

body.layout-butik .products-main {
    width: 100%;
}

body.layout-butik .products-grid {
    gap: 30px;
    max-width: 100%;
    display: grid !important;
}

body.layout-butik .products-grid.layout-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: auto;
}

body.layout-butik .product-card {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

body.layout-butik .product-card:hover {
    box-shadow: none;
    transform: none;
}

/* Butik - Butonlar tema uyumlu */
body.layout-butik .btn-add-cart {
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11px;
}

body.layout-butik .btn-quick-view {
    border-radius: 0;
    border-width: 1px !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11px;
}

body.layout-butik .product-image {
    height: 500px;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

body.layout-butik .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body.layout-butik .product-card:hover .product-image img {
    transform: scale(1.08);
}

body.layout-butik .slider-container {
    width: 100%;
    height: 100%;
}

body.layout-butik .slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.layout-butik .slider-btn {
    opacity: 0;
    transition: opacity 0.3s;
}

body.layout-butik .product-card:hover .slider-btn {
    opacity: 1;
}

body.layout-butik .product-info {
    padding: 24px 0;
    text-align: center;
    background: transparent;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.layout-butik .product-category {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #999;
    background: none;
    padding: 0;
}

body.layout-butik .product-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 10px 0 8px;
    color: #1a1a1a;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

body.layout-butik .product-description {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #888;
    margin: 10px 0 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

body.layout-butik .product-footer {
    margin-top: auto;
    width: 100%;
}

body.layout-butik .product-price {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 2px;
    color: #1a1a1a;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

body.layout-butik .old-price {
    font-size: 13px;
    margin-left: 8px;
}

body.layout-butik .badge {
    display: none;
}

/* Filter - Butik */
body.layout-butik .filter-tabs {
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px;
}

body.layout-butik .filter-tabs a {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #888;
}

body.layout-butik .filter-tabs a:hover,
body.layout-butik .filter-tabs a.active {
    background: transparent;
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

/* Categories - Butik */
body.layout-butik .categories-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
}

body.layout-butik .category-card {
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
    padding: 20px;
}

body.layout-butik .category-card:hover {
    transform: none;
    box-shadow: none;
}

body.layout-butik .category-icon {
    background: transparent;
    width: auto;
    height: auto;
    font-size: 32px;
    margin-bottom: 12px;
}

body.layout-butik .category-card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    color: #1a1a1a;
}

body.layout-butik .category-card p {
    display: none;
}

/* Footer - Butik */
body.layout-butik .corp-footer-main {
    padding: 70px 5% 40px;
}

body.layout-butik .corp-footer-logo span {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}

body.layout-butik .corp-footer-heading {
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: 2px;
}

/* ============================================
           RESPONSIVE - TÜM LAYOUTLAR
           ============================================ */

/* Tablet */
@media (max-width: 1200px) {
    body.layout-shopify .products-grid.layout-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.layout-trendyol .products-grid.layout-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    body.layout-butik .products-grid.layout-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.layout-butik .product-image {
        height: 400px;
    }
}

@media (max-width: 992px) {
    body.layout-shopify .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.layout-shopify .product-image {
        height: 250px;
    }

    body.layout-trendyol .products-grid.layout-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.layout-trendyol .search-box {
        display: none;
    }

    body.layout-butik .hero-slider {
        height: 80vh;
    }

    body.layout-butik .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.layout-butik .product-image {
        height: 350px;
    }

    body.layout-butik .section {
        padding: 60px 20px;
    }
}

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

    /* Shopify Mobile */
    body.layout-shopify .header-main {
        padding: 12px 15px;
    }

    body.layout-shopify .logo h1 {
        font-size: 16px;
        letter-spacing: 1px;
    }

    body.layout-shopify .search-box {
        display: none;
    }

    body.layout-shopify .mobile-menu-btn {
        display: block;
    }

    body.layout-shopify .hero-slider {
        height: 50vh;
        min-height: 300px;
    }

    body.layout-shopify .section {
        padding: 40px 15px;
    }

    body.layout-shopify .section-header {
        margin-bottom: 22px;
    }

    body.layout-shopify .section-header h2 {
        font-size: 22px;
        margin-bottom: 4px;
    }

    body.layout-shopify .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    body.layout-shopify .product-image {
        height: 180px;
    }

    body.layout-shopify .product-info {
        padding: 12px;
    }

    body.layout-shopify .product-name {
        font-size: 13px;
        line-height: 1.4;
    }

    body.layout-shopify .product-description {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }

    body.layout-shopify .product-price {
        font-size: 16px;
    }

    body.layout-shopify .filters-bar {
        flex-direction: column;
        padding: 15px;
    }

    body.layout-shopify .filter-tabs {
        flex-wrap: wrap;
        gap: 8px;
    }

    body.layout-shopify .filter-tabs a {
        font-size: 12px;
        padding: 8px 12px;
    }

    body.layout-shopify .products-grid.layout-list {
        grid-template-columns: 1fr;
    }

    body.layout-shopify .layout-list .product-image {
        width: 150px;
        min-width: 150px;
        height: 150px;
    }

    body.layout-shopify .layout-list .product-info {
        padding: 12px;
    }

    /* Trendyol Mobile */
    body.layout-trendyol .header-main {
        padding: 10px 3%;
    }

    body.layout-trendyol .logo h1 {
        font-size: 20px;
    }

    body.layout-trendyol .hero-slider {
        min-height: 200px;
        max-height: 280px;
    }

    body.layout-trendyol .hero-slide {
        padding: 30px 4%;
    }

    body.layout-trendyol .hero-slide h2 {
        font-size: 22px;
    }

    body.layout-trendyol .section {
        margin: 4px auto;
        max-width: 100%;
        padding: 16px;
        border-radius: 8px;
    }

    body.layout-trendyol .section-header {
        margin-bottom: 14px;
    }

    body.layout-trendyol .section-header h2 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    body.layout-trendyol .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    body.layout-trendyol .product-image {
        height: 160px;
    }

    body.layout-trendyol .product-info {
        padding: 10px;
    }

    body.layout-trendyol .product-name {
        font-size: 12px;
        height: 30px;
    }

    body.layout-trendyol .product-price {
        font-size: 15px;
    }

    body.layout-trendyol .quick-view-trigger {
        display: none;
    }

    /* Butik Mobile */
    body.layout-butik .header-main {
        padding: 15px;
    }

    body.layout-butik .logo img {
        filter: brightness(0) invert(1);
        max-height: 40px;
    }

    body.layout-butik .logo h1 {
        font-size: 18px;
        letter-spacing: 2px;
    }

    body.layout-butik .mobile-menu-btn {
        display: block;
        color: #fff;
    }

    body.layout-butik .hero-slider {
        height: 60vh;
        min-height: 350px;
    }

    body.layout-butik .hero-slide {
        padding: 80px 20px 40px;
    }

    body.layout-butik .hero-slide h2 {
        font-size: 28px;
        letter-spacing: 1px;
    }

    body.layout-butik .hero-slide h3 {
        font-size: 10px;
        letter-spacing: 3px;
    }

    body.layout-butik .section {
        padding: 40px 15px;
    }

    body.layout-butik .section-header {
        margin-bottom: 24px;
    }

    body.layout-butik .section-header h2 {
        font-size: 24px;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    body.layout-butik .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    body.layout-butik .product-image {
        height: 250px;
    }

    body.layout-butik .product-info {
        padding: 16px 0;
    }

    body.layout-butik .product-name {
        font-size: 16px;
        margin: 8px 0 6px;
    }

    body.layout-butik .product-description {
        font-size: 11px;
        margin: 8px 0 10px;
    }

    body.layout-butik .product-price {
        font-size: 13px;
    }

    body.layout-butik .filters-bar {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    body.layout-butik .filter-tabs {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    body.layout-butik .filter-tabs a {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 8px 14px;
    }

    body.layout-butik .products-grid.layout-list {
        grid-template-columns: 1fr;
    }

    body.layout-butik .layout-list .product-image {
        width: 150px;
        min-width: 150px;
        height: 200px;
    }

    body.layout-butik .layout-list .product-info {
        padding: 16px;
    }

    body.layout-butik .layout-list .product-name {
        font-size: 16px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {

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

    .section-header h2 {
        font-size: clamp(18px, 6vw, 26px);
    }

    .section-header h3,
    .section-header p {
        padding: 0 12px;
    }

    /* Shopify Small Mobile */
    body.layout-shopify .products-grid.layout-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    body.layout-shopify .product-image {
        height: 200px;
    }

    body.layout-shopify .product-info {
        padding: 15px;
    }

    body.layout-shopify .product-name {
        font-size: 14px;
    }

    body.layout-shopify .product-description {
        font-size: 12px;
    }

    body.layout-shopify .hero-slide h2 {
        font-size: 22px;
    }

    body.layout-shopify .section {
        padding: 30px 15px;
    }

    body.layout-shopify .layout-list .product-image {
        width: 100%;
        min-width: 100%;
        height: 200px;
    }

    body.layout-shopify .layout-list .product-card {
        flex-direction: column;
    }

    /* Trendyol Small Mobile */
    body.layout-trendyol .products-grid.layout-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    body.layout-trendyol .product-image {
        height: 180px;
    }

    body.layout-trendyol .product-name {
        font-size: 13px;
        height: auto;
    }

    body.layout-trendyol .product-info {
        padding: 12px;
    }

    /* Butik Small Mobile */
    body.layout-butik .products-grid.layout-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    body.layout-butik .product-image {
        height: 300px;
    }

    body.layout-butik .product-name {
        font-size: 18px;
    }

    body.layout-butik .product-description {
        font-size: 12px;
    }

    body.layout-butik .hero-slide h2 {
        font-size: 24px;
    }

    body.layout-butik .section {
        padding: 30px 15px;
    }

    body.layout-butik .section-header h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    body.layout-butik .layout-list .product-image {
        width: 100%;
        min-width: 100%;
        height: 250px;
    }

    body.layout-butik .layout-list .product-card {
        flex-direction: column;
    }
}

/* ============================================
           FULL WIDTH LAYOUT
           ============================================ */
body.layout-fullwidth {
    background: #f8fafc;
}

body.layout-fullwidth .header {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.layout-fullwidth .header-main {
    max-width: 100%;
    padding: 15px 40px;
}

body.layout-fullwidth .hero-slider {
    border-radius: 0;
    margin: 0;
    max-height: 600px;
}

body.layout-fullwidth .section {
    max-width: 100%;
    padding: 50px 40px;
}

body.layout-fullwidth .products-grid {
    max-width: 100%;
    margin: 0 auto;
}

body.layout-fullwidth .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

body.layout-fullwidth .product-card {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

body.layout-fullwidth .product-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

body.layout-fullwidth .product-image {
    border-radius: 12px 12px 0 0;
}

body.layout-fullwidth .corp-footer {
    max-width: 100%;
    border-radius: 0;
    margin: 0;
}

body.layout-fullwidth .corp-footer-main {
    max-width: 1600px;
}

@media (max-width: 768px) {
    body.layout-fullwidth .header-main {
        padding: 12px 15px;
    }

    body.layout-fullwidth .section {
        padding: 30px 15px;
    }
}

/* ============================================
           LIGHTBOX - Ürün Görseli Büyütme
           ============================================ */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Mobilde close button'u içeride göster */
@media (max-width: 768px) {
    .lightbox-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        width: 40px;
        height: 40px;
        font-size: 20px;
        z-index: 10001;
    }

    .lightbox-close:hover {
        background: rgba(0, 0, 0, 0.9);
        transform: rotate(90deg);
    }

    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
        padding: 40px 10px 10px;
    }

    .lightbox-image {
        max-height: 75vh;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .lightbox-close {
        top: 5px;
        right: 5px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .lightbox-content {
        padding: 35px 5px 5px;
    }

    .lightbox-image {
        max-height: 70vh;
    }

    .lightbox-nav {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
}

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

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    overflow-x: auto;
    padding: 10px 0;
    max-width: 100%;
}

.lightbox-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.lightbox-thumb:hover,
.lightbox-thumb.active {
    opacity: 1;
    border-color: white;
}

.lightbox-info {
    color: white;
    text-align: center;
    margin-top: 15px;
}

.lightbox-info h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.lightbox-info p {
    font-size: 14px;
    opacity: 0.7;
}

/* ============================================
           QUICK VIEW MODAL - Hızlı Bakış
           ============================================ */
.quick-view-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quick-view-modal.active {
    display: flex;
    opacity: 1;
}

.quick-view-content {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

.quick-view-gallery {
    position: relative;
    background: #f8f8f8;
    display: flex;
    flex-direction: column;
}

.quick-view-main-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    cursor: zoom-in;
}

.quick-view-main-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s;
}

.quick-view-main-image:hover img {
    transform: scale(1.05);
}

.quick-view-thumbs {
    display: flex;
    gap: 8px;
    padding: 15px;
    overflow-x: auto;
    border-top: 1px solid #eee;
}

.quick-view-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.quick-view-thumb:hover,
.quick-view-thumb.active {
    opacity: 1;
    border-color: var(--primary);
}

.quick-view-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.quick-view-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    z-index: 10;
}

.quick-view-close:hover {
    background: #f5f5f5;
    transform: rotate(90deg);
}

.quick-view-category {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}

.quick-view-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.quick-view-brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.quick-view-brand-name {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.quick-view-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.3;
}

.quick-view-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.quick-view-price .discount-badge {
    background: #dc2626;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.quick-view-description {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex: 1;
}

.quick-view-description-section {
    margin-bottom: 20px;
    flex: 1;
}

.quick-view-short-description {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.quick-view-full-description {
    margin-top: 20px;
}

.quick-view-full-description .description-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-view-full-description .description-content {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid var(--primary, #6366f1);
}

.quick-view-full-description .description-content::-webkit-scrollbar {
    width: 6px;
}

.quick-view-full-description .description-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.quick-view-full-description .description-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.quick-view-full-description .description-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.quick-view-meta {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-bottom: 20px;
}

.quick-view-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

.quick-view-meta-item .icon {
    width: 24px;
    text-align: center;
}

.quick-view-meta-item.in-stock {
    color: #059669;
}

.quick-view-meta-item.out-of-stock {
    color: #dc2626;
}

.quick-view-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 15px;
}

.quick-view-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quick-view-btn.primary {
    background: var(--gradient);
    color: white;
}

.quick-view-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.quick-view-btn.secondary {
    background: #f5f5f5;
    color: #333;
}

.quick-view-btn.secondary:hover {
    background: #eee;
}

/* Quick View Responsive */
@media (max-width: 768px) {
    .quick-view-modal {
        padding: 0;
        align-items: flex-end;
    }

    .quick-view-content {
        grid-template-columns: 1fr;
        max-height: 90vh;
        border-radius: 20px 20px 0 0;
        margin-top: auto;
    }

    .quick-view-close {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
        font-size: 22px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        z-index: 10001;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .quick-view-close:hover {
        background: rgba(0, 0, 0, 0.95);
    }

    .quick-view-gallery {
        max-height: 35vh;
    }

    .quick-view-main-image {
        padding: 15px;
    }

    .quick-view-main-image img {
        max-height: 180px;
    }

    .quick-view-thumbs {
        padding: 10px;
    }

    .quick-view-thumb {
        width: 40px;
        height: 40px;
    }

    .quick-view-details {
        padding: 20px;
        padding-bottom: 100px;
        /* Butonlar için alan */
        max-height: 55vh;
        overflow-y: auto;
    }

    .quick-view-title {
        font-size: 20px;
    }

    .quick-view-price {
        font-size: 22px;
    }

    .quick-view-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 15px 20px;
        padding-bottom: max(15px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 10000;
        border-radius: 0;
        margin-top: 0;
    }

    .quick-view-btn {
        padding: 16px 20px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .quick-view-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .quick-view-gallery {
        max-height: 30vh;
    }

    .quick-view-main-image img {
        max-height: 150px;
    }

    .quick-view-details {
        padding: 15px;
        padding-bottom: 90px;
    }

    .quick-view-title {
        font-size: 18px;
    }

    .quick-view-price {
        font-size: 20px;
    }

    .quick-view-actions {
        padding: 12px 15px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .quick-view-btn {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/* Zoom indicator on product cards */
.product-image .zoom-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 16px;
    z-index: 12;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover .zoom-icon {
    opacity: 1;
}

.zoom-icon:hover {
    background: white;
    transform: scale(1.1);
}

/* =============================================
           PARAMETRİK E-TİCARET STİLLERİ
           ============================================= */

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 15px;
}

.header-account,
.header-cart,
.header-whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
    white-space: nowrap;
}

.header-cart {
    background: var(--primary, #6366f1);
    color: white;
    position: relative;
}

.header-cart:hover,
.header-cart.active {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
}

.header-cart > i,
.header-cart > .fa-cart-shopping {
    font-size: 16px;
    color: inherit;
}

.header-cart .cart-count {
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -5px;
    right: -5px;
}

.header-cart .cart-count:empty,
.header-cart .cart-count[data-count="0"] {
    display: none;
}

.header-whatsapp {
    background: #25D366;
    color: white;
}

.header-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .header-actions .cart-text {
        display: none;
    }

    .header-account,
    .header-cart,
    .header-whatsapp {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .header-account {
        max-width: 120px;
    }
    
    .header-account > i {
        font-size: 14px;
    }
}

/* Mobile Cart Badge */
.mobile-cart-badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Product Action Buttons */
/* Favori Butonu */
.btn-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 15;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-wishlist:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-wishlist.active {
    background: rgba(239, 68, 68, 0.1);
}

.btn-wishlist.active .wishlist-icon {
    animation: heartBeat 0.5s ease;
}

.btn-wishlist:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

.product-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-top: auto;
}

.product-actions button,
.product-actions a {
    flex: 1;
    min-width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-add-cart {
    background: var(--primary, #6366f1);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-add-cart:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-add-cart.adding {
    background: var(--accent, #10b981);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.btn-add-cart.adding .btn-text::after {
    content: 'Eklendi ✓';
}

.btn-add-cart.adding .btn-text {
    font-size: 0;
}

.btn-out-of-stock {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-whatsapp {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

.btn-quote {
    background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #8b5cf6));
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-quote:hover {
    background: linear-gradient(135deg, var(--secondary, #8b5cf6), var(--primary, #6366f1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-quick-view {
    background: var(--card, #ffffff);
    color: var(--primary, #6366f1);
    border: 2px solid var(--primary, #6366f1) !important;
    font-weight: 600;
}

.btn-quick-view:hover {
    background: var(--primary, #6366f1);
    color: white;
    border-color: var(--primary, #6366f1) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.product-actions .btn-icon,
.product-actions i {
    font-size: 14px;
    color: inherit;
}

@media (max-width: 480px) {
    .product-actions {
        padding: 10px 12px;
        gap: 6px;
    }

    .product-actions button,
    .product-actions a {
        padding: 8px 10px;
        font-size: 12px;
    }

    .product-actions .btn-text {
        display: none;
    }

    .product-actions .btn-icon,
    .product-actions i {
        font-size: 16px;
    }
}

/* =============================================
           SEPET SAYFASI STİLLERİ
           ============================================= */
.cart-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px clamp(16px, 4vw, 32px);
}

.cart-page-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
}

.cart-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

/* Checkout / sepet: sağ özet (Para Puan, kupon, banka IBAN) için daha geniş sütun */
@media (min-width: 960px) {
    .cart-container {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
    }
}

@media (min-width: 1200px) {
    .cart-page {
        max-width: 1320px;
    }

    .cart-container {
        grid-template-columns: minmax(0, 1fr) minmax(440px, 500px);
    }
}

@media (max-width: 900px) {
    .cart-container {
        grid-template-columns: 1fr;
    }
}

.cart-items {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.cart-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
    transition: background 0.2s;
}

.cart-item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg);
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.cart-item:hover .cart-item-image {
    border-color: var(--primary);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    color: #1e293b;
}

.cart-item-price {
    color: var(--primary, #6366f1);
    font-weight: 700;
    font-size: 18px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.qty-btn:hover {
    background: #f1f5f9;
}

.qty-value {
    width: 40px;
    text-align: center;
    font-weight: 600;
}

.cart-item-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.cart-item-remove:hover {
    background: #fef2f2;
}

.cart-item-total {
    text-align: right;
    min-width: 80px;
}

.cart-item-total-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
}

/* Cart Summary */
.cart-summary {
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
    min-width: 0;
    box-sizing: border-box;
}

/* Özette uzun metin / IBAN taşmasını önle */
.page-checkout .cart-summary {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.cart-summary h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 15px;
    color: var(--text);
}

.cart-summary-row.total {
    border-top: 2px solid var(--primary);
    margin-top: 15px;
    padding-top: 15px;
    font-size: 20px;
    font-weight: 700;
}

.cart-summary-row.total span:last-child {
    color: var(--primary);
}

.cart-summary-row.shipping-free {
    color: var(--accent, #10b981);
    font-weight: 500;
}

.btn-checkout {
    width: 100%;
    padding: 16px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-checkout:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

.btn-continue-shopping {
    width: 100%;
    padding: 14px;
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
}

.btn-continue-shopping:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Empty Cart */
.cart-empty {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
}

.cart-empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.cart-empty h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.cart-empty p {
    color: #64748b;
    margin-bottom: 30px;
}

.cart-empty .btn-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--primary, #6366f1);
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.cart-empty .btn-shop:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-2px);
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 16px 24px;
    background: #1e293b;
    color: white;
    border-radius: 12px;
    font-weight: 500;
    z-index: 10000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    background: #10b981;
}

.toast.error {
    background: #ef4444;
}

/* =============================================
           HESAP DROPDOWN MENU
           ============================================= */
.header-account-dropdown {
    position: relative;
}

.header-account {
    background: rgba(0,0,0,0.06);
    color: var(--text, #1e293b);
    max-width: 200px;
    overflow: hidden;
}

.header-account > i,
.header-account > .fa-user {
    font-size: 15px;
    color: inherit;
}

.header-account .cart-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.header-account:hover,
.header-account.active {
    background: var(--primary, #6366f1);
    color: white;
}

.account-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card, #ffffff);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 100;
    border: 1px solid rgba(0,0,0,0.06);
}

.header-account-dropdown:hover .account-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.account-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text, #1e293b);
    opacity: 0.75;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.account-dropdown-menu a i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--primary, #6366f1);
}

.account-dropdown-menu a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--primary, #6366f1);
    opacity: 1;
}

.account-dropdown-menu a.logout {
    border-top: 1px solid rgba(0,0,0,0.06);
    color: #ef4444;
    opacity: 1;
}

.account-dropdown-menu a.logout i {
    color: #ef4444;
}

.account-dropdown-menu a.logout:hover {
    background: #fef2f2;
}

/* =============================================
           GİRİŞ / KAYIT SAYFALARI (Split Screen)
           ============================================= */
.auth-page {
    display: flex;
}

.auth-split {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 80px);
}

.auth-brand {
    flex: 0 0 42%;
    background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
}

.auth-brand::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.auth-brand::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.auth-brand-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 340px;
}

/* Orijinal logo renkleri — invert/brightness logoyu bozuyordu; kontrast için hafif plaka */
.auth-brand-logo {
    display: block;
    margin: 0 auto 24px;
    max-width: 168px;
    max-height: 76px;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 14px;
    box-shadow:
        0 6px 28px rgba(0, 0, 0, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.35);
}

.auth-brand-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.auth-brand-desc {
    font-size: 15px;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 36px;
}

.auth-brand-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.auth-brand-features li {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-brand-features li:last-child {
    border-bottom: none;
}

.auth-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.auth-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--background, #f8fafc);
}

.auth-box {
    max-width: 440px;
    width: 100%;
}

.auth-box h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text, #1e293b);
}

.auth-subtitle {
    color: var(--text, #1e293b);
    opacity: 0.6;
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.5;
}

.auth-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 4px solid #dc2626;
}

.auth-success {
    background: #d1fae5;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left: 4px solid #10b981;
}

.auth-warning {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.auth-warning p {
    margin: 8px 0 0;
    font-size: 14px;
}

.auth-box .form-group {
    margin-bottom: 18px;
}

.auth-box .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #1e293b);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-box .form-group input,
.auth-box .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
    background: var(--card, #ffffff);
    color: var(--text, #1e293b);
}

.auth-box .form-group input:focus,
.auth-box .form-group textarea:focus {
    border-color: var(--primary, #6366f1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.input-icon-wrap {
    position: relative;
}

.input-icon-wrap .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--text, #1e293b);
    opacity: 0.35;
    pointer-events: none;
    line-height: 1;
}

.input-icon-wrap input {
    padding-left: 42px !important;
    padding-right: 42px !important;
}

.pass-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--text, #1e293b);
    opacity: 0.35;
    padding: 4px;
    line-height: 1;
}

.pass-toggle:hover {
    opacity: 0.6;
}

.auth-box .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.auth-remember-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
}

.auth-remember-row input {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.auth-forgot-link {
    text-align: right;
    margin: -8px 0 18px;
}

.auth-forgot-link a {
    color: var(--primary, #6366f1);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

.auth-forgot-link a:hover {
    text-decoration: underline;
}

.btn-auth {
    width: 100%;
    padding: 14px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.3px;
}

.btn-auth:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--text, #1e293b);
    opacity: 0.6;
    font-size: 14px;
}

.auth-footer a {
    color: var(--primary, #6366f1);
    font-weight: 600;
    text-decoration: none;
    opacity: 1;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-address-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1.5px solid rgba(0,0,0,0.1);
}

.auth-section-title {
    margin-bottom: 15px;
    color: var(--text, #1e293b);
    opacity: 0.6;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .auth-split {
        flex-direction: column;
        min-height: auto;
    }

    .auth-brand {
        flex: none;
        padding: 40px 30px;
        min-height: auto;
    }

    .auth-brand-features {
        display: none;
    }

    .auth-brand-desc {
        margin-bottom: 0;
    }

    .auth-form-side {
        padding: 30px 20px;
    }

    .auth-box .form-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================
           HESABIM SAYFASI
           ============================================= */
.account-page {
    width: 100%;
    max-width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 4vw, 30px) clamp(12px, 3vw, 22px);
    min-height: 60vh;
    box-sizing: border-box;
}

/* Cari ekstre tablosu için daha geniş çalışma alanı */
.account-page.account-page--cari-ekstre {
    max-width: min(1480px, 100%);
}

@media (min-width: 960px) {
    .account-page.account-page--cari-ekstre .account-container {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    }
}

.account-container {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 24px);
    align-items: start;
    min-width: 0;
}

.account-sidebar {
    background: var(--card, #ffffff);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);
    height: fit-content;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    min-width: 0;
}

.account-user {
    text-align: center;
    padding: 28px 24px 20px;
    background: linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%);
    color: white;
}

.account-avatar {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.2);
    border: 3px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 10px;
}

.account-name {
    font-weight: 700;
    font-size: 17px;
    color: white;
}

.account-company {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    color: white;
    margin-bottom: 4px;
}

.account-name-person {
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.88);
}

.account-addresses-company {
    margin: -4px 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

.checkout-saved-addresses-company {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.account-email {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}

.account-menu {
    padding: 8px;
}

.account-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    color: var(--text, #1e293b);
    opacity: 0.7;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.account-menu a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--primary, #6366f1);
    opacity: 1;
}

.account-menu a.active {
    background: rgba(0,0,0,0.04);
    color: var(--primary, #6366f1);
    border-left-color: var(--primary, #6366f1);
    font-weight: 600;
    opacity: 1;
}

.account-menu a.logout {
    color: #ef4444;
    margin-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 12px;
    border-radius: 0 0 8px 8px;
    opacity: 1;
}

.account-menu a.logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.account-content {
    background: var(--card, #ffffff);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    min-width: 0;
}

.account-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary, #6366f1);
    color: var(--text, #1e293b);
    display: inline-block;
}

/* Hesap ödemesi (?hesabim&odeme) — kısa açıklama metinleri */
.account-odeme-lead {
    color: color-mix(in srgb, var(--text, #1e293b) 58%, transparent);
    max-width: 560px;
    line-height: 1.55;
    font-size: 13px;
}

/* Hesap ödemesi (?hesabim&odeme) — vurgulu tutar kutusu (tema renkleri) */
.standalone-pay-card {
    max-width: 100%;
    margin-bottom: 28px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 24%, var(--border, #e2e8f0));
    box-shadow:
        0 10px 40px color-mix(in srgb, var(--primary, #6366f1) 14%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.04);
    background: linear-gradient(
        165deg,
        var(--card, #ffffff) 0%,
        color-mix(in srgb, var(--primary, #6366f1) 7%, var(--background, #f8fafc)) 48%,
        color-mix(in srgb, var(--primary, #6366f1) 11%, var(--background, #f8fafc)) 100%
    );
}
.standalone-pay-card__head {
    padding: 12px 18px;
    background: var(--gradient, linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.standalone-pay-card__body {
    padding: 22px 20px 20px;
}
.standalone-pay-amount-block {
    text-align: center;
    margin-bottom: 20px;
    padding: 18px 14px 20px;
    background: var(--card, #ffffff);
    border-radius: 14px;
    border: 2px solid color-mix(in srgb, var(--primary, #6366f1) 36%, var(--border, #e2e8f0));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--card, #fff) 90%, transparent);
}
.standalone-pay-amount-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #6366f1);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.standalone-pay-amount-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.standalone-pay-currency {
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 800;
    color: var(--primary, #6366f1);
    line-height: 1;
    flex-shrink: 0;
}
.standalone-pay-amount-input {
    flex: 1;
    min-width: 0;
    max-width: 50%;
    font-size: clamp(1.85rem, 6vw, 2.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    padding: 14px 12px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--background, #f8fafc) 85%, var(--text, #1e293b) 5%) 0%,
        color-mix(in srgb, var(--background, #f8fafc) 92%, var(--text, #1e293b) 4%) 100%
    ) !important;
    color: var(--text, #1e293b) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    letter-spacing: -0.02em;
}
.standalone-pay-amount-input:focus {
    outline: none !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.06),
        0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 38%, transparent) !important;
    background: var(--card, #ffffff) !important;
}
.standalone-pay-amount-hint {
    margin: 12px 0 0;
    font-size: 12px;
    color: color-mix(in srgb, var(--text, #1e293b) 52%, transparent);
    line-height: 1.45;
}
.standalone-pay-note-block label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--text, #1e293b) 88%, transparent);
    font-size: 14px;
}
.standalone-pay-note-block textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    resize: vertical;
    min-height: 72px;
    background: var(--card, #ffffff);
    color: var(--text, #1e293b);
}
.standalone-pay-submit.btn-primary {
    width: 100%;
    margin-top: 18px;
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: var(--gradient, linear-gradient(135deg, var(--primary, #6366f1) 0%, var(--secondary, #8b5cf6) 100%)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #6366f1) 32%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.standalone-pay-submit.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary, #6366f1) 38%, transparent);
}

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

.order-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
    border-left: 4px solid var(--primary, #6366f1);
}

.order-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(0,0,0,0.02);
}

.order-header strong {
    font-size: 14px;
    color: var(--text, #1e293b);
    letter-spacing: 0.3px;
}

.order-date {
    font-size: 12px;
    color: var(--text, #1e293b);
    opacity: 0.5;
    margin-left: 12px;
}

.order-status {
    padding: 4px 12px;
    border-radius: 20px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.order-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
}

.order-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary, #6366f1);
}

.btn-small {
    padding: 7px 14px;
    background: var(--primary, #6366f1);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
}

.btn-danger {
    background: #fef2f2;
    color: #ef4444;
}

.btn-danger:hover {
    background: #ef4444;
    color: white;
}

.addresses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.address-card {
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: all 0.2s;
    background: var(--card, #ffffff);
}

.address-card:hover {
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.address-card.default {
    border-color: var(--primary, #6366f1);
}

.address-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: var(--primary, #6366f1);
    color: white;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.address-card h4 {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--text, #1e293b);
}

.address-card p {
    font-size: 13px;
    color: var(--text, #1e293b);
    opacity: 0.6;
    line-height: 1.7;
}

.address-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}

.address-card.add-new {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: #cbd5e1;
    min-height: 160px;
    cursor: pointer;
    transition: all 0.2s;
}

.address-card.add-new:hover {
    border-color: var(--primary, #6366f1);
    background: rgba(79, 70, 229, 0.02);
}

.address-card.add-new a {
    text-align: center;
    text-decoration: none;
    color: var(--text, #1e293b);
    opacity: 0.5;
}

.address-card.add-new span {
    font-size: 36px;
    display: block;
    color: var(--primary, #6366f1);
    margin-bottom: 4px;
}

.account-form {
    max-width: 520px;
}

.account-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

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

.account-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #1e293b);
    opacity: 0.7;
}

.account-form .form-group input,
.account-form .form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    background: var(--card, #ffffff);
    color: var(--text, #1e293b);
}

.account-form .form-group input:focus,
.account-form .form-group textarea:focus {
    border-color: var(--primary, #6366f1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.account-form .form-group input:disabled {
    background: rgba(0,0,0,0.03);
    color: var(--text, #1e293b);
    opacity: 0.5;
}

.account-form .form-group small {
    font-size: 12px;
    color: var(--text, #1e293b);
    opacity: 0.5;
    display: block;
    margin-top: 4px;
}

.account-email-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

.account-email-readonly {
    flex: 1;
    min-width: 200px;
    background: #f1f5f9 !important;
    opacity: 1 !important;
}

.account-email-dialog {
    border: none;
    padding: 0;
    border-radius: 14px;
    max-width: 440px;
    width: calc(100vw - 32px);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);
    background: var(--card, #ffffff);
    color: var(--text, #1e293b);
}

.account-email-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.account-email-dialog-inner {
    padding: 24px 22px 22px;
}

.account-email-dialog-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #1e293b);
}

.account-email-dialog-intro {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text, #1e293b);
    opacity: 0.72;
}

.account-email-dialog-form .form-group:last-of-type {
    margin-bottom: 0;
}

.account-email-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.account-customer-type-section .account-type-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.account-type-option {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.2s, background 0.2s;
}

.account-type-option input {
    margin: 0;
    flex-shrink: 0;
}

.account-firm-fields {
    padding-top: 4px;
    margin-bottom: 4px;
}

.account-label-req {
    color: #dc2626;
    font-weight: 600;
}

.account-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text, #1e293b);
    opacity: 0.55;
    line-height: 1.45;
}

.legal-consent-block {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #f8fafc;
}

/* İki metin: mobilde alt alta, geniş ekranda yan yana */
.legal-consent-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
}

.legal-consent-column {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.legal-consent-details {
    margin-bottom: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.legal-consent-doc-head {
    flex-shrink: 0;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
}

.legal-consent-page-heading {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
    padding: 0;
    color: var(--text, #0f172a);
}

.auth-page--legal-consent .legal-consent-auth-box > h1.legal-consent-page-heading {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
}

.legal-consent-body {
    padding: 14px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    flex: 1;
    min-height: 180px;
}

.legal-consent-checkbox-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.legal-consent-checkbox-label input {
    margin-top: 4px;
    flex-shrink: 0;
}

/* Yasal onay: kurumsal split; sağ panel tam genişlik, dış gri container yok */
.auth-page--legal-consent .auth-brand {
    flex: 0 0 34%;
}

.auth-page--legal-consent .auth-form-side {
    flex: 1;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding: 12px 6px 20px;
}

.auth-page--legal-consent .legal-consent-auth-box {
    max-width: 100%;
    width: 100%;
}

/* OTP kod ekranı (?yasal_onay&kod=1): dar, ortalanmış kart */
.auth-page--legal-consent .auth-form-side:has(.legal-consent-auth-box--otp) {
    align-items: center;
    justify-content: center;
}

.auth-page--legal-consent .legal-consent-auth-box--otp {
    max-width: 440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.auth-page--legal-consent .legal-consent-auth-box--otp .auth-success,
.auth-page--legal-consent .legal-consent-auth-box--otp .auth-error,
.auth-page--legal-consent .legal-consent-auth-box--otp .auth-warning {
    text-align: center;
}

.auth-page--legal-consent .legal-consent-auth-box--otp .auth-footer {
    text-align: center;
}

.auth-page--legal-consent .legal-consent-auth-box--otp .legal-consent-page-heading,
.auth-page--legal-consent .legal-consent-auth-box--otp > .auth-subtitle {
    text-align: center;
}

.auth-page--legal-consent .legal-consent-auth-box--otp .legal-consent-otp-input {
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

/* Metin okuma (?yasal_onay): ortalı kutu, paneller görünür yüksekliğe sığar */
.auth-page--legal-consent .auth-split {
    align-items: stretch;
    min-height: calc(100svh - 80px);
}

.auth-page--legal-consent .auth-form-side:has(.legal-consent-auth-box--docs) {
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding-top: 16px;
    padding-bottom: 20px;
}

.auth-page--legal-consent .legal-consent-auth-box--docs {
    max-width: min(1040px, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-accept-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-block {
    margin-top: 4px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-columns {
    max-height: calc(100svh - 270px);
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-column {
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-details {
    flex: 1;
    min-height: 0;
    max-height: 100%;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-body {
    min-height: 0;
    /* Flex zinciri hata verse bile metin alanı taşsın: üst sınır + kaydırma */
    max-height: min(52vh, 640px);
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-checkbox-label {
    flex-shrink: 0;
    margin-top: 12px;
}

.auth-page--legal-consent .legal-consent-auth-box--docs .auth-footer {
    text-align: center;
}

@media (max-width: 900px) {
    .auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-columns {
        max-height: none;
    }

    .auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-body {
        max-height: min(40svh, 360px);
        min-height: 100px;
    }
}

.btn-with-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.btn-with-loading-spinner .legal-consent-otp-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border-width: 2px;
    flex-shrink: 0;
    margin: 0;
}

.btn-with-loading-spinner.is-loading .legal-consent-otp-spinner {
    display: block;
}

.btn-with-loading-spinner.is-loading {
    opacity: 0.92;
    cursor: wait;
}

.btn-with-loading-spinner--muted.is-loading .legal-consent-otp-spinner {
    border-color: #cbd5e1;
    border-top-color: var(--primary, #0d9488);
}

.btn-auth.btn-with-loading-spinner.is-loading .legal-consent-otp-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

.auth-page--legal-consent .legal-consent-block {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-page--legal-consent .legal-consent-auth-box:not(.legal-consent-auth-box--docs) .legal-consent-body {
    max-height: min(52vh, 520px);
    min-height: 220px;
}

@media (max-width: 900px) {
    .auth-page--legal-consent .auth-form-side {
        padding: 12px 6px 20px;
    }

    .auth-page--legal-consent .legal-consent-page-heading {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .auth-page--legal-consent .legal-consent-auth-box:not(.legal-consent-auth-box--docs) .legal-consent-body {
        max-height: 260px;
        min-height: 140px;
    }
}

@media (min-width: 900px) {
    .legal-consent-columns {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    /* İki sütun tek satır: satır yüksekliği olmadan iç alan scroll etmez */
    .auth-page--legal-consent .legal-consent-auth-box--docs .legal-consent-columns {
        grid-template-rows: minmax(0, 1fr);
    }
}

/* Kayıt formu: yasal blok varken geniş ekranda kutu genişlesin; yasal onay sayfası (.legal-consent-auth-box) hariç */
@media (min-width: 900px) {
    .auth-form-side:has(.legal-consent-block) .auth-box:not(.legal-consent-auth-box) {
        max-width: min(960px, 100%);
    }
}

.hint-warning {
    color: #92400e !important;
}

.btn-primary {
    padding: 11px 24px;
    background: var(--primary, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.btn-secondary {
    padding: 11px 24px;
    background: rgba(0,0,0,0.05);
    color: var(--text, #1e293b);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(0,0,0,0.1);
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.empty-state p {
    color: var(--text, #1e293b);
    opacity: 0.5;
    margin-bottom: 20px;
    font-size: 15px;
}

/* Sipariş Takip */
.track-result {
    margin-top: 25px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0,0,0,0.02);
}

.track-info {
    padding: 15px 20px;
}

.track-info p {
    margin: 8px 0;
    color: var(--text, #1e293b);
    opacity: 0.7;
}

@media (max-width: 900px) {
    .account-container {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        order: -1;
    }

    .account-user {
        padding: 20px 16px 16px;
    }

    .account-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px;
    }

    .account-menu a {
        flex: 1 1 auto;
        text-align: center;
        min-width: min(100%, 7.5rem);
        justify-content: center;
        border-left: none;
        font-size: 13px;
        padding: 10px 8px;
    }

    .account-menu a.active {
        border-left: none;
        border-bottom: 2px solid var(--primary, #6366f1);
    }

    .account-menu a.logout {
        border-top: none;
        margin-top: 0;
        padding-top: 10px;
        flex: 1 1 100%;
    }

    .account-content {
        padding: 20px 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .account-form .form-row {
        grid-template-columns: 1fr;
    }

    .order-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }

    .order-header > div:first-child {
        min-width: 0;
    }

    .order-body {
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }

    .order-body .btn-small {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .standalone-pay-amount-row {
        flex-wrap: wrap;
    }

    .standalone-pay-amount-input {
        max-width: 100% !important;
        width: 100%;
    }

    .addresses-grid {
        grid-template-columns: 1fr;
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

.btn-checkout:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loader {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.saved-address-option:has(input:checked) {
    border-color: var(--primary) !important;
    background: rgba(79, 70, 229, 0.05);
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.checkout-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.checkout-section h3 {
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

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

.checkout-grid .form-group.full-width {
    grid-column: 1 / -1;
}

.checkout-section .form-group label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.checkout-section .form-group input,
.checkout-section .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
}

.checkout-section .form-group input:focus,
.checkout-section .form-group textarea:focus {
    border-color: var(--primary, #6366f1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.checkout-section .checkout-order-note-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.payment-option:has(input:checked) {
    border-color: var(--primary, #6366f1);
    background: rgba(79, 70, 229, 0.05);
}

.payment-option input {
    width: 18px;
    height: 18px;
}

.payment-option-title {
    font-weight: 600;
}

.payment-option-desc {
    font-size: 13px;
    color: #64748b;
}

.bank-accounts {
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 13px;
}

.bank-account-item {
    padding: 10px;
    background: white;
    border-radius: 6px;
    margin-bottom: 8px;
}

.bank-account-item:last-child {
    margin-bottom: 0;
}

.bank-account-item code {
    font-size: 12px;
    color: #475569;
}

.checkout-items-mini {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.checkout-item-mini {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}

.checkout-item-mini .item-qty {
    color: #64748b;
    min-width: 30px;
}

.checkout-item-mini .item-name {
    flex: 1;
}

.checkout-item-mini .item-price {
    font-weight: 600;
}

@media (max-width: 600px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   ORDER DETAIL PAGE (od- prefix)
   ============================================= */
.od-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.od-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--card, #ffffff);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.od-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.od-success-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent, #10b981), #34d399);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.od-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin: 0 0 4px;
}

.od-order-no {
    font-size: 14px;
    color: var(--text, #64748b);
    opacity: 0.6;
    margin: 0;
    font-family: monospace;
}

.od-order-no i { margin-right: 2px; }

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

.od-status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.od-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.od-btn-pdf:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
}

/* Alert Boxes */
.od-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 14px;
}

.od-alert-warning {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
}

.od-alert-danger {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.od-alert-success {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.od-alert-info {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0c4a6e;
}

/* Timeline */
.od-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: var(--card, #ffffff);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    position: relative;
}

.od-timeline::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: rgba(0,0,0,0.08);
    z-index: 0;
}

.od-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
    flex: 1;
    opacity: 0.35;
    transition: all 0.3s;
}

.od-timeline-step.completed {
    opacity: 1;
}

.od-timeline-step.active {
    opacity: 1;
}

.od-timeline-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--background, #f1f5f9);
    color: var(--text, #94a3b8);
    border: 3px solid transparent;
    transition: all 0.3s;
}

.od-timeline-step.completed .od-timeline-icon {
    background: var(--accent, #10b981);
    color: #fff;
    border-color: rgba(16,185,129,0.2);
}

.od-timeline-step.active .od-timeline-icon {
    background: var(--primary, #6366f1);
    color: #fff;
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}

.od-timeline-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #64748b);
    text-align: center;
    max-width: 80px;
}

.od-timeline-step.active .od-timeline-label {
    color: var(--primary, #6366f1);
}

/* 2-Column Body */
.od-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

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

.od-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cards */
.od-card {
    background: var(--card, #ffffff);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.od-sidebar .od-card {
    margin-bottom: 0;
}

.od-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 8px;
}

.od-card-title i {
    color: var(--primary, #6366f1);
    font-size: 14px;
}

.od-item-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text, #94a3b8);
    opacity: 0.5;
}

/* Product Rows */
.od-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.od-product-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 10px;
    transition: background 0.2s;
}

.od-product-row:hover {
    background: rgba(0,0,0,0.02);
}

.od-product-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--background, #f1f5f9);
}

.od-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.od-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0,0,0,0.15);
    font-size: 20px;
}

.od-product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.od-product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-product-qty {
    font-size: 12px;
    color: var(--text, #64748b);
    opacity: 0.6;
}

.od-product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1e293b);
    white-space: nowrap;
}

/* Tracking Card */
.od-card-tracking .od-tracking-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.od-tracking-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.od-tracking-carrier {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1e293b);
}

.od-tracking-code {
    font-size: 13px;
    background: var(--background, #f1f5f9);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--text, #475569);
}

.od-btn-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--primary, #6366f1);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}

.od-btn-track:hover {
    background: var(--secondary, #8b5cf6);
    transform: translateY(-1px);
}

/* Sidebar: Summary */
.od-summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.od-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text, #475569);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.od-summary-row:last-child {
    border-bottom: none;
}

.od-summary-total {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary, #6366f1);
    padding-top: 12px;
    margin-top: 4px;
    border-top: 2px solid rgba(0,0,0,0.08);
    border-bottom: none;
}

/* Sidebar: Address */
.od-address {
    font-size: 14px;
    color: var(--text, #475569);
    line-height: 1.7;
}

.od-address p {
    margin: 0;
}

.od-address-name {
    font-weight: 700;
    color: var(--text, #1e293b);
    margin-bottom: 4px !important;
}

.od-address-phone {
    margin-top: 8px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.od-address-phone i {
    color: var(--primary, #6366f1);
    font-size: 12px;
}

/* Footer */
.od-footer {
    text-align: center;
    margin-top: 8px;
}

.od-btn-continue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--card, #ffffff);
    color: var(--primary, #6366f1);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.od-btn-continue:hover {
    background: var(--primary, #6366f1);
    color: #fff;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .od-container { padding: 10px 0; }

    .od-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .od-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .od-timeline {
        padding: 20px 12px;
        gap: 4px;
    }

    .od-timeline::before {
        left: 30px;
        right: 30px;
        top: 42px;
    }

    .od-timeline-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .od-timeline-label {
        font-size: 10px;
        max-width: 60px;
    }

    .od-body {
        flex-direction: column;
    }

    .od-sidebar {
        width: 100%;
    }

    .od-card {
        padding: 18px;
        border-radius: 12px;
    }

    .od-product-img {
        width: 48px;
        height: 48px;
    }

    .od-title { font-size: 18px; }
}

.page-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    min-height: 70vh;
}

.page-content {
    background: var(--card, #fff);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-back-link {
    display: inline-block;
    color: var(--primary, #6366f1);
    text-decoration: none;
    margin-bottom: 20px;
    font-size: 14px;
}

.page-back-link:hover {
    text-decoration: underline;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text, #1e293b);
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary, #6366f1);
}

.page-body {
    color: var(--text, #1e293b);
    line-height: 1.8;
    font-size: 16px;
}

.page-body h2 {
    font-size: 24px;
    margin: 30px 0 15px;
    color: var(--text, #1e293b);
}

.page-body h3 {
    font-size: 20px;
    margin: 25px 0 12px;
    color: var(--text, #1e293b);
}

.page-body p {
    margin-bottom: 15px;
}

.page-body ul,
.page-body ol {
    margin: 15px 0;
    padding-left: 25px;
}

.page-body li {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .page-content-wrapper {
        padding: 20px 15px 60px;
    }

    .page-content {
        padding: 25px 20px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-body {
        font-size: 15px;
    }
}

/* ===== SIDEBAR LAYOUT (Sol Kategori Menü - Full Width) ===== */
.layout-sidebar .main-with-sidebar {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
    min-height: calc(100vh - 200px);
}

/* Full width için container ayarları */
.layout-sidebar .container,
.layout-sidebar .section {
    max-width: 100%;
    padding: 0;
}

.category-sidebar {
    background: var(--card, #fff);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 2px 10px rgba(0, 0, 0, 0.08));
    padding: 20px 0;
    position: sticky;
    top: 100px;
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* Scrollbar styling */
.category-sidebar::-webkit-scrollbar {
    width: 6px;
}

.category-sidebar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.category-sidebar::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1);
    border-radius: 3px;
}

.category-sidebar-header {
    padding: 0 20px 15px;
    border-bottom: 2px solid var(--primary, #6366f1);
    margin-bottom: 10px;
}

.category-sidebar-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text, #1e293b);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.category-sidebar-header h3 span {
    font-size: 20px;
}

.category-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-sidebar-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.category-sidebar-item:last-child {
    border-bottom: none;
}

.category-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text, #1e293b);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.category-sidebar-link:hover {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent);
    color: var(--primary, #6366f1);
    padding-left: 24px;
}

.category-sidebar-link.active {
    background: linear-gradient(90deg, var(--primary, #6366f1), #8b5cf6);
    color: white;
    font-weight: 600;
}

/* Category Icon & Image */
.category-sidebar-link .cat-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.category-sidebar-link .cat-image {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.category-sidebar-link:hover .cat-image {
    transform: scale(1.1);
}

.category-sidebar-link.active .cat-image {
    border-color: rgba(255, 255, 255, 0.3);
}

.category-sidebar-link .cat-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-sidebar-link .count {
    background: rgba(0, 0, 0, 0.06);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.category-sidebar-link.active .count {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Hierarchical Category Tree */
.category-sidebar-item.has-children>.category-sidebar-link {
    padding-left: 10px;
}

.category-sidebar-link .cat-toggle {
    font-size: 10px;
    color: #94a3b8;
    width: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.category-sidebar-item.expanded>.category-sidebar-link .cat-toggle {
    color: var(--primary, #6366f1);
}

.category-children {
    list-style: none;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.02);
    border-left: 2px solid rgba(99, 102, 241, 0.2);
    margin-left: 20px;
}

.category-children .category-sidebar-link {
    padding: 10px 15px;
    font-size: 13px;
}

.category-children .category-sidebar-link .cat-icon {
    font-size: 14px;
    width: 20px;
    color: #94a3b8;
}

.category-children .category-sidebar-link:hover .cat-icon {
    color: var(--primary, #6366f1);
}

.category-children .category-sidebar-link.active .cat-icon {
    color: white;
}

.category-children .count {
    font-size: 11px;
    padding: 2px 8px;
}

/* Nested children */
.category-children .category-children {
    margin-left: 15px;
    border-left-color: rgba(99, 102, 241, 0.1);
}

.category-sidebar-all {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.category-sidebar-all:hover {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), transparent);
}

.sidebar-products-area {
    padding: 20px 0;
}

.layout-sidebar .filters-bar {
    margin-bottom: 20px;
}

.layout-sidebar .filter-tabs {
    display: none;
    /* Sidebar'da kategori filtreleri zaten var */
}

.layout-sidebar .section-header {
    margin-bottom: 18px;
}

.layout-sidebar .section-header h2 {
    margin-bottom: 4px;
}

.layout-sidebar .products-toolbar {
    margin-bottom: 16px;
}

/* Products grid full width */
.layout-sidebar .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Search Box in Sidebar */
.category-sidebar-search {
    padding: 0 15px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
}

.category-sidebar-search input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #f8fafc;
    transition: all 0.2s;
}

.category-sidebar-search input:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Hide hero for sidebar layout - cleaner B2B look */
.layout-sidebar .hero {
    display: none;
}

.layout-sidebar .campaign-banner-main {
    margin: 0 30px 20px;
    border-radius: var(--radius, 12px);
}

/* Full width header for sidebar layout */
.layout-sidebar .header-main {
    max-width: 100%;
    padding: 15px 30px;
}

.layout-sidebar .container {
    max-width: 100%;
}

/* Responsive */
@media (max-width: 1200px) {
    .layout-sidebar .main-with-sidebar {
        grid-template-columns: 260px 1fr;
        gap: 25px;
        padding: 0 20px;
    }
}

@media (max-width: 1024px) {
    .layout-sidebar .main-with-sidebar {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }

    .category-sidebar-link .cat-image {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    .layout-sidebar .main-with-sidebar {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }

    .category-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 20px;
    }

    .category-sidebar-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 15px 15px;
    }

    .category-sidebar-item {
        border: none;
    }

    .category-sidebar-link {
        padding: 8px 14px;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        font-size: 13px;
        gap: 6px;
    }

    .category-sidebar-link:hover {
        padding-left: 14px;
    }

    .category-sidebar-link .cat-icon {
        font-size: 16px;
        width: auto;
    }

    .category-sidebar-link .cat-image {
        width: 24px;
        height: 24px;
    }

    .category-sidebar-link .count {
        display: none;
    }

    .layout-sidebar .filter-tabs {
        display: none;
    }
}

/* Mega Menu Mobile */
@media (max-width: 768px) {
    .products-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .toolbar-title {
        font-size: 18px;
        width: 100%;
    }
    
    .toolbar-search {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
    
    .products-toolbar .layout-switcher {
        margin-left: 0;
    }

    .products-search-box {
        max-width: 100%;
        margin-bottom: 20px;
        flex-direction: column;
    }
    
    .products-search-input {
        width: 100%;
    }
    
    .products-search-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }
    
    .category-breadcrumb {
        padding: 10px 15px;
        font-size: 13px;
        gap: 6px;
    }

    .breadcrumb-count {
        width: 100%;
        margin-left: 0;
        margin-top: 5px;
        text-align: center;
    }

    /* Mobile Category Menu */
    .category-menu-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .category-toggle-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 14px 18px;
    }

    .category-dropdown {
        position: static;
        width: 100%;
        min-width: auto;
        max-height: 50vh;
        margin-top: 10px;
        box-shadow: none;
        border-radius: 12px;
    }

    .cat-link {
        padding: 14px 16px;
        font-size: 15px;
    }

    .layout-switcher {
        display: none;
    }
    
    .products-search-box {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .products-search-btn {
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* ============================================
           YENİ UI LAYOUT'LAR - TEMEL STİLLER
           ============================================ */

/* AMAZON STİL - Filtreleme odaklı */
body.layout-amazon {
    background: #f8f9fa;
}

body.layout-amazon .header {
    background: #131921;
    color: #fff;
}

body.layout-amazon .header-main {
    max-width: 100%;
    margin: 0 auto;
}

/* AMAZON STİL - Filtreleme odaklı */
body.layout-amazon .section {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

body.layout-amazon .products-wrapper {
    display: block;
    max-width: 100%;
}

body.layout-amazon .products-main {
    width: 100%;
}

body.layout-amazon .products-grid,
body.layout-amazon .products-grid.layout-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
    grid-auto-flow: row !important;
}

body.layout-amazon .products-grid.layout-list {
    grid-template-columns: 1fr !important;
}

body.layout-amazon .products-grid.layout-masonry {
    columns: 4 !important;
    column-gap: 15px !important;
}

body.layout-amazon .product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.layout-amazon .product-image {
    width: 100% !important;
    height: 200px !important;
}

/* NIKE STİL - Minimal, bold */
body.layout-nike {
    background: #fff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

body.layout-nike .header {
    background: #000;
    color: #fff;
}

body.layout-nike .product-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

body.layout-nike .product-name {
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}

body.layout-nike .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

/* APPLE STİL - Ultra minimal, premium */
body.layout-apple {
    background: #fbfbfd;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

body.layout-apple .header {
    background: rgba(251, 251, 253, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

body.layout-apple .section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 60px 40px;
}

body.layout-apple .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 50px;
}

body.layout-apple .product-card {
    border: none;
    background: transparent;
}

/* ZARA STİL - Moda, editorial */
body.layout-zara {
    background: #fff;
}

body.layout-zara .header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

body.layout-zara .hero-slider {
    height: 80vh;
    min-height: 600px;
}

body.layout-zara .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

body.layout-zara .product-image {
    height: 400px;
}

/* IKEA STİL - Katalog görünümü */
body.layout-ikea {
    background: #f5f5f5;
}

body.layout-ikea .section {
    background: #fff;
    padding: 40px;
    margin: 20px auto;
    max-width: 100%;
    border-radius: 8px;
}

body.layout-ikea .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* ETSY STİL - El yapımı, samimi */
body.layout-etsy {
    background: #fffef7;
}

body.layout-etsy .header {
    background: #fff;
    border-bottom: 2px solid #f1641e;
}

body.layout-etsy .product-card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
}

body.layout-etsy .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

/* WALMART STİL - Market, yoğun grid */
body.layout-walmart {
    background: #f7f7f7;
}

body.layout-walmart .header {
    background: #004c91;
    color: #fff;
}

body.layout-walmart .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

body.layout-walmart .product-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

/* NETFLIX STİL - Carousel, görsel odaklı */
body.layout-netflix {
    background: #141414;
    color: #fff;
}

body.layout-netflix .header {
    background: #141414;
    border-bottom: 1px solid #333;
}

body.layout-netflix .section {
    padding: 40px 0;
}

body.layout-netflix .products-grid {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
}

body.layout-netflix .product-card {
    min-width: 300px;
    scroll-snap-align: start;
}

/* ===== LAYOUT FOOTER UYUMLARI ===== */
/* Arka plan: var(--text), accent: var(--primary) otomatik tema uyumu */

body.layout-nike .corp-footer-logo span,
body.layout-nike .corp-footer-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.layout-apple .corp-footer-main {
    max-width: 1200px;
}
body.layout-apple .corp-footer-heading::after {
    display: none;
}

body.layout-zara .corp-footer-logo span,
body.layout-zara .corp-footer-heading {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 300;
}

/* PINTEREST STİL - Masonry */
body.layout-pinterest .products-grid.layout-grid {
    column-count: 4;
    column-gap: 20px;
}

body.layout-pinterest .product-card {
    break-inside: avoid;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

/* MAGAZINE STİL - Editorial */
body.layout-magazine {
    background: #fff;
    font-family: Georgia, serif;
}

body.layout-magazine .section-header {
    margin-bottom: 32px;
}

body.layout-magazine .section-header h2 {
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -1px;
    margin: 0 0 8px;
    line-height: 1.1;
}

body.layout-magazine .section-header h3,
body.layout-magazine .section-header p {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666;
    margin: 0 auto;
    max-width: 560px;
}

body.layout-magazine .toolbar-title {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -0.5px;
}

body.layout-magazine .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

/* DASHBOARD STİL - B2B, kart bazlı */
body.layout-dashboard {
    background: #f5f7fa;
}

body.layout-dashboard .section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 30px 4%;
    margin: 20px auto;
    max-width: 100%;
}

body.layout-dashboard .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* MOBILE FIRST STİL - Mobil öncelikli */
body.layout-mobile_first .products-grid.layout-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

body.layout-mobile_first .product-card {
    border-radius: 12px;
}

body.layout-mobile_first .product-image {
    height: 200px;
}

/* ONE PAGE STİL - Landing page */
body.layout-one_page {
    background: #fff;
}

body.layout-one_page .section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.layout-one_page .products-grid.layout-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Responsive - Yeni Layout'lar */
@media (max-width: 768px) {
    body.layout-amazon .products-wrapper {
        grid-template-columns: 1fr;
    }
    
    body.layout-nike .products-grid.layout-grid,
    body.layout-apple .products-grid.layout-grid,
    body.layout-zara .products-grid.layout-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    body.layout-pinterest .products-grid.layout-grid {
        column-count: 2;
    }
    
    body.layout-netflix .product-card {
        min-width: 250px;
    }
}

/* ============================================
           PRODUCT CARD STYLES
           Tema ve layout'a uygun çalışır
           ============================================ */

/* Varsayılan stil zaten mevcut - .product-card */

/* MINIMAL STİL */
body.product-card-minimal .product-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: var(--card);
    box-shadow: none;
    transition: border-color 0.3s;
}

body.product-card-minimal .product-card:hover {
    border-color: var(--primary);
    box-shadow: none;
    transform: none;
}

body.product-card-minimal .product-image {
    border-radius: 8px 8px 0 0;
}

body.product-card-minimal .product-info {
    padding: 16px;
}

body.product-card-minimal .product-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

body.product-card-minimal .product-description {
    display: none;
}

/* MODERN STİL */
body.product-card-modern .product-card {
    border: none;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.product-card-modern .product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

body.product-card-modern .product-image {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

body.product-card-modern .product-info {
    padding: 20px;
}

/* COMPACT STİL */
body.product-card-compact .product-card {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0;
}

body.product-card-compact .product-image {
    height: 150px;
    border-radius: 6px 6px 0 0;
}

body.product-card-compact .product-info {
    padding: 12px;
}

body.product-card-compact .product-name {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.product-card-compact .product-description {
    display: none;
}

body.product-card-compact .product-price {
    font-size: 16px;
}

/* PREMIUM STİL */
body.product-card-premium .product-card {
    border: none;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.4s ease;
}

body.product-card-premium .product-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-6px) scale(1.02);
}

body.product-card-premium .product-image {
    height: 350px;
    border-radius: 0;
}

body.product-card-premium .product-info {
    padding: 24px;
    background: linear-gradient(to bottom, transparent, var(--card));
}

body.product-card-premium .product-name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

body.product-card-premium .product-price {
    font-size: 24px;
    font-weight: 700;
}

/* BORDERED STİL */
body.product-card-bordered .product-card {
    border: 2px solid var(--primary);
    border-radius: 12px;
    background: var(--card);
    box-shadow: none;
    transition: all 0.3s;
}

body.product-card-bordered .product-card:hover {
    border-color: var(--secondary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

body.product-card-bordered .product-image {
    border-radius: 10px 10px 0 0;
    border-bottom: 2px solid var(--primary);
}

body.product-card-bordered .product-info {
    padding: 18px;
    border-top: 1px solid #e2e8f0;
}

/* IMAGE FOCUS STİL */
body.product-card-image_focus .product-card {
    border: none;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

body.product-card-image_focus .product-image {
    height: 300px;
    border-radius: 12px;
    margin-bottom: 12px;
}

body.product-card-image_focus .product-info {
    padding: 0;
    text-align: center;
}

body.product-card-image_focus .product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

body.product-card-image_focus .product-description {
    display: none;
}

body.product-card-image_focus .product-category {
    display: none;
}

/* INFO RICH STİL */
body.product-card-info_rich .product-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: var(--card);
}

body.product-card-info_rich .product-image {
    height: 250px;
}

body.product-card-info_rich .product-info {
    padding: 20px;
}

body.product-card-info_rich .product-description {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.product-card-info_rich .product-name {
    font-size: 18px;
    margin-bottom: 10px;
}

/* BADGE HEAVY STİL */
body.product-card-badge_heavy .product-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: var(--card);
    position: relative;
    overflow: visible;
}

body.product-card-badge_heavy .product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

body.product-card-badge_heavy .badges-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.product-card-badge_heavy .badge {
    font-size: 11px;
    padding: 4px 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.product-card-badge_heavy .product-image {
    border-radius: 12px 12px 0 0;
}

/* GRADIENT STİL */
body.product-card-gradient .product-card {
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    overflow: hidden;
    position: relative;
}

body.product-card-gradient .product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);
    z-index: 1;
}

body.product-card-gradient .product-image {
    position: relative;
    z-index: 2;
    opacity: 0.8;
    mix-blend-mode: overlay;
}

body.product-card-gradient .product-info {
    position: relative;
    z-index: 3;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

body.product-card-gradient .product-name,
body.product-card-gradient .product-price,
body.product-card-gradient .product-category {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Layout'a özel uyumlar */
body.layout-shopify.product-card-minimal .product-card {
    border-radius: 0;
    border: 1px solid #e8e8e8;
}

body.layout-trendyol.product-card-modern .product-card:hover {
    border-color: #ff6000;
}

body.layout-butik.product-card-premium .product-image {
    height: 500px;
}

body.layout-amazon.product-card-compact .product-image {
    height: 180px;
}

/* Responsive */
@media (max-width: 768px) {
    body.product-card-premium .product-image {
        height: 250px;
    }
    
    body.product-card-image_focus .product-image {
        height: 200px;
    }
    
    body.product-card-info_rich .product-description {
        -webkit-line-clamp: 2;
    }
}

/* =============================================
   PRODUCT DETAIL PAGE
   ============================================= */
.product-detail-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #64748b;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--primary, #6366f1);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .current {
    color: #1e293b;
    font-weight: 500;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.main-image-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.main-product-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
}

.thumbnail-strip {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding: 4px 0;
}

.thumb-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.thumb-img.active,
.thumb-img:hover {
    border-color: var(--primary, #6366f1);
}

.product-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin: 0 0 8px;
}

.product-sku {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 16px;
}

.product-detail-price {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.product-detail-price .current-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary, #6366f1);
}

.product-detail-price .old-price {
    font-size: 18px;
    color: #94a3b8;
    text-decoration: line-through;
}

.product-detail-price .discount-badge {
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.price-login-notice {
    color: #f59e0b;
    font-size: 14px;
    margin-bottom: 16px;
}

.product-stock-status {
    font-size: 14px;
    margin-bottom: 20px;
}

.product-stock-status.in-stock {
    color: #16a34a;
}

.product-stock-status.out-of-stock {
    color: #ef4444;
}

.product-stock-status .low-stock {
    color: #f59e0b;
    font-weight: 500;
}

.product-short-desc {
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.product-detail-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.quantity-selector {
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.quantity-selector button {
    width: 40px;
    height: 44px;
    background: #f8fafc;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #334155;
    transition: background 0.2s;
}

.quantity-selector button:hover {
    background: #e2e8f0;
}

.quantity-selector input {
    width: 56px;
    text-align: center;
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    font-size: 16px;
    -moz-appearance: textfield;
}

.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-add-cart-detail {
    background: var(--primary, #6366f1);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-add-cart-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.btn-whatsapp-detail {
    background: #25d366;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-whatsapp-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}

.product-specs {
    margin-top: 20px;
}

.product-specs h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.product-specs table {
    width: 100%;
    border-collapse: collapse;
}

.product-specs td {
    padding: 8px 12px;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.product-specs td:first-child {
    color: #64748b;
    width: 120px;
}

.product-specs td:last-child {
    color: #1e293b;
    font-weight: 500;
}

.product-full-description {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 40px;
    border: 1px solid #e2e8f0;
}

.product-full-description h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary, #6366f1);
    display: inline-block;
}

.product-full-description .desc-content {
    color: #475569;
    line-height: 1.8;
    font-size: 15px;
}

.product-full-description .desc-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.related-products {
    margin-top: 40px;
}

.related-products h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* Product name SEO link */
.product-name-link {
    color: inherit;
    text-decoration: none;
}

.product-name-link:hover {
    color: var(--primary, #6366f1);
}

/* =============================================
   SEO PAGINATION (visually hidden, kept for crawlers)
   ============================================= */
.seo-pagination {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

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

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

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

    .btn-add-cart-detail,
    .btn-whatsapp-detail {
        justify-content: center;
    }

    .quantity-selector {
        justify-content: center;
    }

    .product-full-description {
        padding: 20px;
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =============================================
   MEGA MENU CATEGORY STYLE
   ============================================= */
.category-mega-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.mega-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary, #6366f1);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mega-menu-trigger:hover,
.mega-menu-trigger.open {
    background: var(--secondary, #8b5cf6);
}

.mega-menu-trigger .toggle-arrow {
    transition: transform 0.2s;
}

.mega-menu-trigger.open .toggle-arrow {
    transform: rotate(180deg);
}

.mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 24px;
    z-index: 100;
    margin-top: 8px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}

.mega-menu-panel.open {
    display: grid;
}

.mega-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
    color: #1e293b;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 2px solid var(--primary, #6366f1);
    margin-bottom: 8px;
}

.mega-col-title:hover,
.mega-col-title.active {
    color: var(--primary, #6366f1);
}

.mega-col-title .cat-count {
    margin-left: auto;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
}

.mega-sub-list {
    display: flex;
    flex-direction: column;
}

.mega-sub-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s;
}

.mega-sub-link:hover,
.mega-sub-link.active {
    color: var(--primary, #6366f1);
}

.mega-sub-link .cat-count {
    margin-left: auto;
    font-size: 11px;
    color: #cbd5e1;
}

.mega-sub-link.level-2 {
    padding-left: 20px;
    font-size: 13px;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .mega-menu-panel {
        grid-template-columns: 1fr 1fr;
        padding: 16px;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .mega-menu-panel {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   ICON GRID CATEGORY STYLE
   ============================================= */
.category-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.cat-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s;
    gap: 6px;
    min-height: 100px;
}

.cat-icon-card:hover {
    border-color: var(--primary, #6366f1);
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.cat-icon-card.active {
    border-color: var(--primary, #6366f1);
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06));
    box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

.cat-icon-big {
    font-size: 32px;
    line-height: 1;
}

.cat-icon-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
}

.cat-icon-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
}

.cat-icon-count {
    font-size: 11px;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .category-icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    .cat-icon-card {
        padding: 12px 6px;
        min-height: 80px;
    }

    .cat-icon-big {
        font-size: 26px;
    }

    .cat-icon-name {
        font-size: 11px;
    }
}

/* =============================================
   GLASSMORPHISM PRODUCT CARD STYLE
   ============================================= */
body.product-card-glassmorphism .product-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
}

body.product-card-glassmorphism .product-card:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
    transform: translateY(-4px);
}

body.product-card-glassmorphism .product-card .product-image {
    border-radius: 16px;
    margin: 8px;
    overflow: hidden;
}

body.product-card-glassmorphism .product-card .product-info {
    padding: 12px 16px 16px;
}

body.product-card-glassmorphism .product-card .product-footer {
    background: rgba(248, 250, 252, 0.5);
    border-radius: 0 0 20px 20px;
}

/* =============================================
   OVERLAY PRODUCT CARD STYLE
   ============================================= */
body.product-card-overlay .product-card {
    border-radius: 16px;
    overflow: hidden;
    border: none;
    position: relative;
}

body.product-card-overlay .product-card .product-image {
    height: 320px;
}

body.product-card-overlay .product-card .product-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 60px 16px 16px;
    z-index: 2;
}

body.product-card-overlay .product-card .product-category {
    color: rgba(255,255,255,0.7);
}

body.product-card-overlay .product-card .product-name {
    color: #fff;
    font-weight: 700;
}

body.product-card-overlay .product-card .product-name a {
    color: #fff;
}

body.product-card-overlay .product-card .product-price {
    color: #fff;
    font-weight: 700;
}

body.product-card-overlay .product-card .product-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: transparent;
}

body.product-card-overlay .product-card .product-footer .product-actions .btn-add-cart,
body.product-card-overlay .product-card .product-footer .product-actions .btn-quick-view {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

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

body.product-card-overlay .product-card .product-description-wrapper {
    display: none;
}

@media (max-width: 768px) {
    body.product-card-overlay .product-card .product-image {
        height: 240px;
    }
}

/* =============================================
   POLAROID PRODUCT CARD STYLE
   ============================================= */
body.product-card-polaroid .product-card {
    background: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 12px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
    transform: rotate(-0.5deg);
    transition: transform 0.3s, box-shadow 0.3s;
}

body.product-card-polaroid .product-card:nth-child(even) {
    transform: rotate(0.5deg);
}

body.product-card-polaroid .product-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

body.product-card-polaroid .product-card .product-image {
    border-radius: 2px;
    border: 1px solid #f0f0f0;
}

body.product-card-polaroid .product-card .product-info {
    padding: 12px 4px 4px;
    text-align: center;
}

body.product-card-polaroid .product-card .product-name {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
}

body.product-card-polaroid .product-card .product-category {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body.product-card-polaroid .product-card .product-footer {
    background: transparent;
    border-top: none;
}

/* =============================================
   NEON PRODUCT CARD STYLE
   ============================================= */
body.product-card-neon .product-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    transition: all 0.3s;
}

body.product-card-neon .product-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 60px rgba(139, 92, 246, 0.1);
}

body.product-card-neon .product-card .product-image {
    border-radius: 12px;
    margin: 6px;
    overflow: hidden;
}

body.product-card-neon .product-card .product-info {
    padding: 10px 14px;
}

body.product-card-neon .product-card .product-category {
    color: #7c3aed;
    font-weight: 600;
}

body.product-card-neon .product-card .product-name,
body.product-card-neon .product-card .product-name a {
    color: #e2e8f0;
}

body.product-card-neon .product-card .product-price {
    color: #a78bfa;
    font-weight: 700;
}

body.product-card-neon .product-card .product-old-price {
    color: #475569;
}

body.product-card-neon .product-card .product-description {
    color: #64748b;
}

body.product-card-neon .product-card .product-footer {
    background: #1e293b;
    border-top: 1px solid #334155;
    border-radius: 0 0 16px 16px;
}

body.product-card-neon .product-card .btn-add-cart {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    color: #fff;
}

body.product-card-neon .product-card .btn-add-cart:hover {
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

body.product-card-neon .product-card .btn-quick-view {
    background: #1e293b;
    border: 1px solid #334155;
    color: #94a3b8;
}

body.product-card-neon .product-card .product-badges .badge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

body.product-card-neon .product-card .product-badges .badge-discount {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== Katalog filtre paneli + breadcrumb / sıralama ===== */
.catalog-layout-with-filters {
    display: grid;
    grid-template-columns: minmax(240px, 280px) 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.catalog-main-column {
    min-width: 0;
}

.catalog-filter-panel {
    position: sticky;
    top: 200px;
    border: 2px solid color-mix(in srgb, var(--primary, #6366f1) 35%, var(--border, #e2e8f0));
    border-radius: 14px;
    background: var(--card, #fff);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    padding: 0;
    overflow: hidden;
}

.catalog-filter-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: color-mix(in srgb, var(--primary, #6366f1) 5%, var(--card, #fff));
}

.catalog-filter-panel-title-text {
    flex: 1;
    min-width: 0;
}

.catalog-filter-drawer-host {
    min-width: 0;
}

.catalog-filter-open-btn {
    display: none;
}

.catalog-filter-open-icon {
    font-size: 18px;
    line-height: 1;
    opacity: 0.85;
}

.catalog-filter-drawer-close {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.catalog-filter-drawer-close:hover {
    background: color-mix(in srgb, var(--primary, #6366f1) 12%, transparent);
    color: var(--primary, #6366f1);
}

.catalog-filter-panel-inner {
    padding: 14px 16px 16px;
}

.catalog-facet-block {
    margin-bottom: 16px;
}

.catalog-facet-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}

.catalog-facet-subcats {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-facet-subcat-link {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #1e293b);
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}

.catalog-facet-subcat-link:hover,
.catalog-facet-subcat-link.is-active {
    background: color-mix(in srgb, var(--primary, #6366f1) 10%, transparent);
    color: var(--primary, #6366f1);
}

.catalog-facet-subcat-count {
    font-weight: 600;
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.catalog-facet-details {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.catalog-facet-summary {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background, #f8fafc);
}

.catalog-facet-summary::-webkit-details-marker {
    display: none;
}

.catalog-facet-body {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border, #e2e8f0);
}

.catalog-facet-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

.catalog-facet-brands {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.catalog-facet-brands li {
    margin-bottom: 4px;
}

.catalog-facet-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.catalog-facet-muted {
    margin-left: auto;
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.catalog-facet-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-facet-box {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0);
}

.catalog-filter-submit {
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: var(--primary, #6366f1);
    color: #fff;
    transition: filter 0.15s, transform 0.1s;
}

.catalog-filter-submit:hover {
    filter: brightness(1.06);
}

.catalog-filter-submit.is-loading {
    opacity: 0.65;
    pointer-events: none;
}

.catalog-brand-selection-summary {
    margin-bottom: 10px;
}

.catalog-brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 0;
}

.catalog-brand-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--primary, #6366f1) 14%, var(--card, #fff));
    color: var(--primary, #6366f1);
    border: 1px solid color-mix(in srgb, var(--primary, #6366f1) 35%, var(--border, #e2e8f0));
}

.catalog-brand-pick-hint {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin: 8px 0 0;
    line-height: 1.4;
}

.catalog-brand-category-empty {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    margin: 0;
    padding: 10px 12px;
    background: var(--background, #f8fafc);
    border-radius: 8px;
    line-height: 1.45;
}

.catalog-brand-clear-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary, #6366f1);
    text-decoration: none;
}

.catalog-brand-clear-link:hover {
    text-decoration: underline;
}

.catalog-facet-brands--links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-facet-brand-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text, #1e293b);
    font-size: 13px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.catalog-facet-brand-link:hover {
    background: color-mix(in srgb, var(--primary, #6366f1) 8%, var(--card, #fff));
    border-color: var(--border, #e2e8f0);
}

.catalog-facet-brand-link.is-active {
    background: color-mix(in srgb, var(--primary, #6366f1) 12%, var(--card, #fff));
    color: var(--primary, #6366f1);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--primary, #6366f1) 35%, var(--border, #e2e8f0));
}

.catalog-breadcrumb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card, #fff);
}

.catalog-breadcrumb-bar--sort-only {
    justify-content: flex-end;
}

.catalog-breadcrumb-bar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    flex: 1;
    min-width: 0;
}

/* Breadcrumb satırındaki mobil Filtre Aç (masaüstünde gizli) */
.catalog-filter-open-btn--in-bar {
    display: none;
}

.catalog-filter-empty-hint {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}

/* Kategori/marka #products: masaüstünde header + alt kategori şeridi (~subcat-nav) için pay; mobil ayrı blokta */
.section#products {
    scroll-margin-top: 185px;
}

.catalog-breadcrumb-bar .category-breadcrumb {
    font-size: 14px;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
}

.catalog-breadcrumb-bar .category-breadcrumb a {
    color: var(--primary, #6366f1);
    text-decoration: none;
    font-weight: 500;
}

.catalog-breadcrumb-bar .breadcrumb-count {
    margin-left: 6px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.catalog-sort-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-right: 8px;
}

.catalog-filter-reset {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 13px;
    color: var(--primary, #6366f1);
}

.catalog-sort-select {
    min-width: 200px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
    font-size: 14px;
    background: var(--card, #fff);
    color: var(--text, #1e293b);
}

@media (max-width: 960px) {
    /* Header + alt kategori şeridi + nefes: #products başı yapışkanların altında kalmasın */
    .section#products {
        scroll-margin-top: 145px;
    }

    .catalog-layout-with-filters {
        grid-template-columns: 1fr;
    }

    /* Asıl tetikleyici breadcrumb’daki kopya; üstteki tam genişlik butonunu gizle */
    .catalog-filter-drawer-host > .catalog-filter-open-btn {
        display: none !important;
    }

    .catalog-breadcrumb-bar-left {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-filter-open-btn--in-bar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 0;
        padding: 10px 14px;
        font-size: 14px;
        order: -1;
    }

    .catalog-breadcrumb-bar-left .category-breadcrumb {
        width: 100%;
    }

    .catalog-filter-open-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 14px;
        padding: 12px 16px;
        border: 2px solid color-mix(in srgb, var(--primary, #6366f1) 35%, var(--border, #e2e8f0));
        border-radius: 12px;
        background: var(--card, #fff);
        color: var(--text, #1e293b);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .catalog-filter-open-btn:hover {
        border-color: color-mix(in srgb, var(--primary, #6366f1) 55%, var(--border, #e2e8f0));
    }

    .catalog-filter-drawer-host.is-open .catalog-filter-open-btn,
    body.catalog-filter-drawer-open .catalog-filter-open-btn--in-bar {
        opacity: 0.65;
    }

    .catalog-filter-drawer-close {
        display: inline-flex;
    }

    .catalog-filter-panel {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(90vw, 320px);
        max-height: 100vh;
        margin: 0;
        z-index: 10050;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        border-radius: 0 16px 16px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
    }

    .catalog-filter-drawer-host.is-open .catalog-filter-panel {
        transform: translateX(0);
    }

    .catalog-filter-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10040;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        transition: opacity 0.25s ease, visibility 0.25s;
    }

    .catalog-filter-drawer-host.is-open .catalog-filter-drawer-backdrop:not([hidden]) {
        opacity: 1;
        visibility: visible;
    }

    .catalog-breadcrumb-bar {
        flex-direction: column;
        align-items: stretch;
    }

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

    @media (prefers-reduced-motion: reduce) {
        .catalog-filter-panel {
            transition: none;
        }

        .catalog-filter-drawer-backdrop {
            transition: none;
        }
    }
}

body.catalog-filter-drawer-open {
    overflow: hidden;
}

/* ===== Sepet giriş modalı (SweetAlert2 — vitrin tema değişkenleri) ===== */
.swal2-container:has(.cart-login-popup) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.swal2-popup.cart-login-popup {
    position: relative !important;
    padding: 0 !important;
    border-radius: var(--radius, 16px) !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text, #1e293b) 10%, transparent) !important;
    background: var(--card, #ffffff) !important;
    box-shadow:
        var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)),
        0 0 0 1px color-mix(in srgb, var(--primary, #6366f1) 14%, transparent),
        0 28px 64px -16px rgba(15, 23, 42, 0.22) !important;
}

/* Tema vurgusu: ince üst şerit + başlık için ferah alan (kırpılma olmasın) */
.swal2-popup.cart-login-popup::before {
    content: '';
    display: block;
    height: 5px;
    background: var(--gradient, linear-gradient(90deg, var(--primary) 0%, var(--secondary, #8b5cf6) 100%));
}

.cart-login-popup .swal2-header {
    margin: 0 !important;
    padding: 1.35rem 1.5rem 0.35rem !important;
    background: transparent !important;
    text-align: center !important;
}

.cart-login-popup .swal2-title.cart-login-swal-title,
.cart-login-popup #swal2-title.cart-login-swal-title,
.cart-login-popup .swal2-title {
    margin: 0 auto !important;
    padding: 0.15rem 0 0 !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--text, #1e293b) !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

.cart-login-popup .cart-login-swal-html {
    margin: 0 !important;
    padding: 0 !important;
}

.cart-login-wrap {
    text-align: left;
    padding: 1.25rem 1.5rem 0.25rem;
}

.cart-login-lead {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text, #1e293b) 72%, transparent);
}

.cart-login-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--text, #1e293b) 58%, transparent);
    margin-bottom: 0.35rem;
}

.cart-login-popup .cart-login-input.swal2-input {
    width: 100% !important;
    margin: 0 0 0.95rem !important;
    height: auto !important;
    padding: 0.72rem 0.95rem !important;
    font-size: 0.95rem !important;
    border-radius: var(--radius-sm, 10px) !important;
    border: 1px solid color-mix(in srgb, var(--text, #1e293b) 14%, var(--card, #fff)) !important;
    background: var(--card, #fff) !important;
    color: var(--text, #1e293b) !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cart-login-popup .cart-login-input.swal2-input:focus {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #6366f1) 22%, transparent) !important;
}

.cart-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    margin: 0.35rem 0 0.15rem;
}

.cart-login-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: var(--text, #1e293b);
    cursor: pointer;
    user-select: none;
}

.cart-login-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary, #6366f1);
    cursor: pointer;
}

.cart-login-forgot {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--primary, #6366f1);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    transition: color 0.15s, border-color 0.15s;
}

.cart-login-forgot:hover {
    color: var(--secondary, #8b5cf6);
    border-bottom-color: color-mix(in srgb, var(--secondary) 45%, transparent);
}

.cart-login-register {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--text, #1e293b) 10%, transparent);
    text-align: center;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--text, #1e293b) 68%, transparent);
}

.cart-login-reg-link {
    font-weight: 600;
    color: var(--primary, #6366f1);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    margin-left: 0.15rem;
}

.cart-login-reg-link:hover {
    color: var(--secondary, #8b5cf6);
    border-bottom-color: color-mix(in srgb, var(--secondary) 45%, transparent);
}

.cart-login-popup .cart-login-swal-actions {
    margin: 0 !important;
    padding: 1rem 1.5rem 1.35rem !important;
    gap: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: color-mix(in srgb, var(--text, #1e293b) 3.5%, var(--card, #fff)) !important;
    border-top: 1px solid color-mix(in srgb, var(--text, #1e293b) 8%, transparent) !important;
}

.cart-login-popup .cart-login-swal-confirm,
.cart-login-popup .cart-login-swal-cancel {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--radius-sm, 10px) !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Swal varsayılanı turuncu “İptal” metnini kapat — tema metin rengi */
.cart-login-popup .cart-login-swal-cancel,
.cart-login-popup button.swal2-cancel.cart-login-swal-cancel {
    color: var(--text, #1e293b) !important;
    background: color-mix(in srgb, var(--text, #1e293b) 7%, var(--card, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--text, #1e293b) 14%, transparent) !important;
}

.cart-login-popup .cart-login-swal-cancel:hover {
    color: var(--text, #1e293b) !important;
    background: color-mix(in srgb, var(--text, #1e293b) 11%, var(--card, #fff)) !important;
    transform: translateY(-1px);
}

.cart-login-popup .cart-login-swal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary, #6366f1) 28%, transparent) !important;
}

.cart-login-popup .swal2-validation-message {
    margin: 0.5rem 1.5rem 0 !important;
    border-radius: var(--radius-sm, 10px) !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
    font-size: 0.88rem !important;
    padding: 0.55rem 0.75rem !important;
}

@media (prefers-reduced-motion: reduce) {
    .cart-login-popup .cart-login-swal-confirm:hover,
    .cart-login-popup .cart-login-swal-cancel:hover {
        transform: none;
    }
}