/*! PRODUCT PAGE v3.0 - Tüm CSS burada, çakışma olmaz */

/* Reset & Base */
.sp-page * { box-sizing: border-box; }
.sp-page { padding: 30px 0 80px !important; background: #f8fafc !important; }
.sp-page .sp-container { max-width: 1320px !important; margin: 0 auto !important; padding: 0 20px !important; }

/* Breadcrumb */
.sp-page .sp-breadcrumb { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 24px !important; font-size: 13px !important; color: #64748b !important; flex-wrap: wrap !important; }
.sp-page .sp-breadcrumb a { color: #64748b !important; text-decoration: none !important; }
.sp-page .sp-breadcrumb a:hover { color: #dc2626 !important; }

/* Main Layout */
.sp-page .sp-main { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 50px !important; margin-bottom: 50px !important; }

/* ===========================================
   GALLERY - WORKING SLIDER
   =========================================== */
.sp-page .sp-gallery { position: relative !important; }

.sp-page .sp-gallery-main { 
    position: relative !important; 
    background: #fff !important; 
    border-radius: 16px !important; 
    overflow: hidden !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; 
    margin-bottom: 16px !important; 
}

.sp-page .sp-gallery-img { 
    width: 100% !important; 
    aspect-ratio: 1 !important; 
    object-fit: contain !important; 
    display: block !important; 
    padding: 20px !important; 
    transition: opacity 0.3s ease !important; 
}

/* Gallery Badges */
.sp-page .sp-badges { 
    position: absolute !important; 
    top: 16px !important; 
    left: 16px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 8px !important; 
    z-index: 10 !important; 
}
.sp-page .sp-badge { 
    padding: 8px 14px !important; 
    border-radius: 8px !important; 
    font-size: 12px !important; 
    font-weight: 700 !important; 
    background: #dc2626 !important; 
    color: #fff !important; 
}

/* Gallery Navigation */
.sp-page .sp-gallery-nav { 
    position: absolute !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    width: 48px !important; 
    height: 48px !important; 
    background: #fff !important; 
    border: none !important; 
    border-radius: 50% !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #374151 !important; 
    transition: all 0.2s !important; 
    z-index: 10 !important; 
}
.sp-page .sp-gallery-nav:hover { background: #dc2626 !important; color: #fff !important; }
.sp-page .sp-gallery-nav.prev { left: 16px !important; }
.sp-page .sp-gallery-nav.next { right: 16px !important; }

/* Gallery Thumbnails */
.sp-page .sp-thumbs { 
    display: flex !important; 
    gap: 12px !important; 
    overflow-x: auto !important; 
    padding: 4px !important; 
    scroll-behavior: smooth !important;
}
.sp-page .sp-thumbs::-webkit-scrollbar { height: 6px !important; }
.sp-page .sp-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 3px !important; }

.sp-page .sp-thumb { 
    flex-shrink: 0 !important; 
    width: 80px !important; 
    height: 80px !important; 
    border: 3px solid #e2e8f0 !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    cursor: pointer !important; 
    transition: all 0.2s !important; 
    background: #fff !important; 
    padding: 0 !important;
}
.sp-page .sp-thumb:hover { border-color: #94a3b8 !important; }
.sp-page .sp-thumb.active { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.2) !important; }
.sp-page .sp-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* ===========================================
   PRODUCT INFO
   =========================================== */
.sp-page .sp-info { display: flex !important; flex-direction: column !important; }

.sp-page .sp-brand { 
    display: inline-flex !important; 
    align-items: center !important; 
    gap: 6px !important; 
    padding: 6px 14px !important; 
    background: #f1f5f9 !important; 
    border-radius: 6px !important; 
    font-size: 12px !important; 
    font-weight: 600 !important; 
    color: #64748b !important; 
    text-decoration: none !important; 
    margin-bottom: 12px !important; 
    width: fit-content !important; 
}

.sp-page .sp-title { 
    font-size: 28px !important; 
    font-weight: 700 !important; 
    color: #0f172a !important; 
    margin: 0 0 16px !important; 
    line-height: 1.3 !important; 
}

.sp-page .sp-desc { 
    font-size: 15px !important; 
    color: #64748b !important; 
    line-height: 1.7 !important; 
    margin-bottom: 24px !important; 
}
.sp-page .sp-desc p { margin: 0 0 10px !important; }

/* Price Block */
.sp-page .sp-price-box { 
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%) !important; 
    border: 2px solid #fecaca !important; 
    border-radius: 16px !important; 
    padding: 24px !important; 
    margin-bottom: 24px !important; 
}
.sp-page .sp-price-row { display: flex !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.sp-page .sp-price-old { font-size: 18px !important; color: #94a3b8 !important; text-decoration: line-through !important; }
.sp-page .sp-price-now { font-size: 36px !important; font-weight: 800 !important; color: #dc2626 !important; }
.sp-page .sp-price-badge { padding: 6px 12px !important; background: #dc2626 !important; color: #fff !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; }
.sp-page .sp-price-inst { margin-top: 12px !important; font-size: 14px !important; color: #64748b !important; }
.sp-page .sp-price-inst strong { color: #0f172a !important; }

/* Stock */
.sp-page .sp-stock { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 20px !important; font-size: 14px !important; font-weight: 500 !important; }
.sp-page .sp-stock.in { color: #10b981 !important; }
.sp-page .sp-stock.out { color: #ef4444 !important; }

/* Add to Cart */
.sp-page .sp-actions { display: flex !important; gap: 16px !important; margin-bottom: 24px !important; flex-wrap: wrap !important; }

.sp-page .sp-qty { 
    display: flex !important; 
    align-items: center !important; 
    border: 2px solid #e2e8f0 !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    background: #fff !important; 
}
.sp-page .sp-qty-btn { 
    width: 48px !important; 
    height: 52px !important; 
    background: #f8fafc !important; 
    border: none !important; 
    font-size: 20px !important; 
    color: #374151 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
}
.sp-page .sp-qty-btn:hover { background: #dc2626 !important; color: #fff !important; }
.sp-page .sp-qty-input { 
    width: 60px !important; 
    height: 52px !important; 
    border: none !important; 
    text-align: center !important; 
    font-size: 18px !important; 
    font-weight: 600 !important; 
    color: #0f172a !important;
}
.sp-page .sp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none !important; }

.sp-page .sp-cart-btn { 
    flex: 1 !important; 
    min-width: 200px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 12px !important; 
    padding: 16px 32px !important; 
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; 
    color: #fff !important; 
    border: none !important; 
    border-radius: 12px !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    cursor: pointer !important; 
    transition: all 0.3s !important; 
}
.sp-page .sp-cart-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(220,38,38,0.35) !important; }

/* Secondary Actions */
.sp-page .sp-secondary { display: flex !important; gap: 12px !important; margin-bottom: 24px !important; flex-wrap: wrap !important; }
.sp-page .sp-sec-btn { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    padding: 12px 20px !important; 
    background: #f8fafc !important; 
    border: 2px solid #e2e8f0 !important; 
    border-radius: 10px !important; 
    font-size: 14px !important; 
    font-weight: 500 !important; 
    color: #374151 !important; 
    cursor: pointer !important; 
    text-decoration: none !important; 
    transition: all 0.2s !important; 
}
.sp-page .sp-sec-btn:hover { border-color: #dc2626 !important; color: #dc2626 !important; background: #fef2f2 !important; }

/* Trust Features */
.sp-page .sp-trust { 
    display: grid !important; 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 12px !important; 
    padding: 20px !important; 
    background: #fff !important; 
    border-radius: 16px !important; 
    border: 1px solid #e2e8f0 !important; 
}
.sp-page .sp-trust-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; }
.sp-page .sp-trust-icon { 
    width: 44px !important; 
    height: 44px !important; 
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important; 
    border-radius: 10px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #fff !important; 
    flex-shrink: 0 !important; 
}
.sp-page .sp-trust-text strong { display: block !important; font-size: 14px !important; color: #0f172a !important; margin-bottom: 2px !important; }
.sp-page .sp-trust-text span { font-size: 12px !important; color: #64748b !important; }

/* ===========================================
   TABS - YATAY TAB SİSTEMİ
   =========================================== */
.sp-page .sp-tabs { 
    background: #fff !important; 
    border-radius: 20px !important; 
    box-shadow: 0 4px 25px rgba(0,0,0,0.08) !important; 
    overflow: hidden !important; 
}

/* Tab Navigation - YATAY */
.sp-page .sp-tabs-nav { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    gap: 0 !important; 
    background: #f8fafc !important; 
    border-bottom: 2px solid #e2e8f0 !important; 
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch !important;
}
.sp-page .sp-tabs-nav::-webkit-scrollbar { height: 0 !important; display: none !important; }

.sp-page .sp-tab-btn { 
    flex-shrink: 0 !important; 
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 18px 24px !important; 
    background: transparent !important; 
    border: none !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: #64748b !important; 
    cursor: pointer !important; 
    position: relative !important; 
    transition: all 0.2s !important; 
    white-space: nowrap !important; 
}
.sp-page .sp-tab-btn:hover { color: #dc2626 !important; background: rgba(220,38,38,0.05) !important; }
.sp-page .sp-tab-btn.active { color: #dc2626 !important; background: #fff !important; }
.sp-page .sp-tab-btn.active::after { 
    content: '' !important; 
    position: absolute !important; 
    bottom: -2px !important; 
    left: 0 !important; 
    right: 0 !important; 
    height: 3px !important; 
    background: #dc2626 !important; 
}

/* Tab Panels */
.sp-page .sp-tab-panel { 
    display: none !important; 
    padding: 40px !important; 
}
.sp-page .sp-tab-panel.active { 
    display: block !important; 
    animation: spFadeIn 0.3s ease !important; 
}
@keyframes spFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Tab Content */
.sp-page .sp-tab-content h3 { font-size: 20px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 16px !important; }
.sp-page .sp-tab-content p { font-size: 15px !important; color: #475569 !important; line-height: 1.8 !important; margin: 0 0 16px !important; }

/* Specs Table */
.sp-page .sp-specs { width: 100% !important; border-collapse: collapse !important; }
.sp-page .sp-specs tr { border-bottom: 1px solid #f1f5f9 !important; }
.sp-page .sp-specs th { 
    text-align: left !important; 
    padding: 16px 20px !important; 
    background: #f8fafc !important; 
    font-size: 14px !important; 
    font-weight: 600 !important; 
    color: #374151 !important; 
    width: 35% !important; 
}
.sp-page .sp-specs td { padding: 16px 20px !important; font-size: 14px !important; color: #0f172a !important; }

/* Installment Table */
.sp-page .sp-inst-section { margin-bottom: 30px !important; }
.sp-page .sp-inst-title { 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    color: #0f172a !important; 
    margin-bottom: 16px !important; 
    padding: 12px 16px !important; 
    background: #f8fafc !important; 
    border-radius: 8px !important; 
}
.sp-page .sp-inst-table { 
    width: 100% !important; 
    border-collapse: collapse !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 10px !important; 
    overflow: hidden !important; 
}
.sp-page .sp-inst-table th { 
    padding: 12px !important; 
    background: #f8fafc !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    color: #374151 !important; 
    text-align: center !important; 
}
.sp-page .sp-inst-table td { 
    padding: 12px !important; 
    font-size: 14px !important; 
    color: #0f172a !important; 
    text-align: center !important; 
    border-top: 1px solid #f1f5f9 !important; 
}

/* Empty State */
.sp-page .sp-empty { text-align: center !important; padding: 60px 40px !important; color: #94a3b8 !important; }
.sp-page .sp-empty p { font-size: 15px !important; margin: 0 !important; }

/* Related Products */
.sp-page .sp-related { margin-top: 60px !important; }
.sp-page .sp-related-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 30px !important; }
.sp-page .sp-related-title { font-size: 24px !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 991px) {
    .sp-page .sp-main { grid-template-columns: 1fr !important; gap: 30px !important; }
    .sp-page .sp-title { font-size: 24px !important; }
    .sp-page .sp-price-now { font-size: 28px !important; }
    .sp-page .sp-tab-btn { padding: 14px 18px !important; font-size: 13px !important; }
    .sp-page .sp-tab-panel { padding: 24px !important; }
}

@media (max-width: 575px) {
    .sp-page .sp-actions { flex-direction: column !important; }
    .sp-page .sp-cart-btn { min-width: 100% !important; }
    .sp-page .sp-trust { grid-template-columns: 1fr !important; }
    .sp-page .sp-thumb { width: 60px !important; height: 60px !important; }
    .sp-page .sp-gallery-nav { width: 40px !important; height: 40px !important; }
    .sp-page .sp-tab-btn { padding: 12px 14px !important; font-size: 12px !important; }
}