/**
 * ═══════════════════════════════════════════════════════════════
 * ANASAYFA ÜRÜN KARTLARI - YENİ MODERN & ÖZGÜN TASARIM
 * Neon Vurgular & Smooth Animasyonlar
 * Version: 8.0 - 2026
 * ═══════════════════════════════════════════════════════════════
 */

/* ===============a===== ESKÄ° BUTONLARI KALDIR ==================== */
#featured .product-thumb .image .button-group,
#latest .product-thumb .image .button-group,
#bestseller .product-thumb .image .button-group,
#special .product-thumb .image .button-group {
    display: none !important;
}

/* ==================== ÃœRÃœN MODÃœL CONTAINER ==================== */
#featured,
#latest,
#bestseller,
#special {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%) !important;
    padding: 50px 20px !important;
    margin: 30px 0 !important;
    border-radius: 20px !important;
    position: relative !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

/* ==================== BAÅžLIK ==================== */
#featured h2,
#latest h2,
#bestseller h2,
#special h2,
.urunbaslik {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin: 0 0 40px 0 !important;
    text-align: center !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
}

#featured h2::after,
#latest h2::after,
#bestseller h2::after,
#special h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #f59e0b) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.8) !important;
}

.urunbaslik {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* ==================== ÃœRÃœN LAYOUT ==================== */
#featured .product-layout,
#latest .product-layout,
#bestseller .product-layout,
#special .product-layout {
    padding: 12px !important;
}

/* ==================== ÃœRÃœN KARTI ==================== */
#featured .product-thumb,
#latest .product-thumb,
#bestseller .product-thumb,
#special .product-thumb {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    padding: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    border: 2px solid transparent !important;
}

#featured .product-thumb::before,
#latest .product-thumb::before,
#bestseller .product-thumb::before,
#special .product-thumb::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: linear-gradient(45deg, #f59e0b, #ef4444, #8b5cf6, #3b82f6) !important;
    border-radius: 20px !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

#featured .product-thumb:hover,
#latest .product-thumb:hover,
#bestseller .product-thumb:hover,
#special .product-thumb:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}

#featured .product-thumb:hover::before,
#latest .product-thumb:hover::before,
#bestseller .product-thumb:hover::before,
#special .product-thumb:hover::before {
    opacity: 1 !important;
}

/* ==================== RESÄ°M ALANI ==================== */
#featured .product-thumb .image,
#latest .product-thumb .image,
#bestseller .product-thumb .image,
#special .product-thumb .image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

#featured .product-thumb .image a,
#latest .product-thumb .image a,
#bestseller .product-thumb .image a,
#special .product-thumb .image a {
    display: block !important;
    padding: 25px !important;
}

#featured .product-thumb .image img,
#latest .product-thumb .image img,
#bestseller .product-thumb .image img,
#special .product-thumb .image img {
    width: 100% !important;
    height: auto !important;
    transition: all 0.6s ease !important;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)) !important;
}

#featured .product-thumb:hover .image img,
#latest .product-thumb:hover .image img,
#bestseller .product-thumb:hover .image img,
#special .product-thumb:hover .image img {
    transform: scale(1.12) rotate(-2deg) !important;
}

/* Hover görsel */
#featured .product-thumb .image .hover-image,
#latest .product-thumb .image .hover-image,
#bestseller .product-thumb .image .hover-image,
#special .product-thumb .image .hover-image {
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;
    right: 25px !important;
    bottom: 25px !important;
    opacity: 0 !important;
    transition: opacity 0.5s ease !important;
}

#featured .product-thumb:hover .image .hover-image,
#latest .product-thumb:hover .image .hover-image,
#bestseller .product-thumb:hover .image .hover-image,
#special .product-thumb:hover .image .hover-image {
    opacity: 1 !important;
}

/* ==================== ETÄ°KETLER ==================== */
.indirim,
.miktar {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 30px !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    z-index: 10 !important;
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.5) !important;
    text-transform: uppercase !important;
    animation: pulseGlow 2s ease-in-out infinite !important;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(239, 68, 68, 0.5);
    }
    50% {
        box-shadow: 0 5px 30px rgba(239, 68, 68, 0.8);
    }
}

.miktar {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 5px 20px rgba(139, 92, 246, 0.5) !important;
    display: none;
}

/* BÄ°LGÄ° ETÄ°KETLERÄ° */
.bilgi-1,
.bilgi-2 {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    background: rgba(30, 60, 114, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 25px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 10 !important;
    display: none;
}

.bilgi-2 {
    bottom: 60px !important;
    background: rgba(59, 130, 246, 0.95) !important;
    display: none;
}

/* ==================== CAPTION ==================== */
#featured .product-thumb .caption,
#latest .product-thumb .caption,
#bestseller .product-thumb .caption,
#special .product-thumb .caption {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 25px !important;
}

/* ==================== BAÅžLIK ==================== */
#featured .product-thumb h4,
#latest .product-thumb h4,
#bestseller .product-thumb h4,
#special .product-thumb h4 {
    margin: 0 0 15px 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    min-height: 51px !important;
    color: #1e293b !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

#featured .product-thumb h4 a,
#latest .product-thumb h4 a,
#bestseller .product-thumb h4 a,
#special .product-thumb h4 a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

#featured .product-thumb:hover h4 a,
#latest .product-thumb:hover h4 a,
#bestseller .product-thumb:hover h4 a,
#special .product-thumb:hover h4 a {
    color: #7c3aed !important;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.3) !important;
}

/* ==================== YILDIZLAR ==================== */
#featured .product-thumb .rating,
#latest .product-thumb .rating,
#bestseller .product-thumb .rating,
#special .product-thumb .rating {
    margin: 12px 0 !important;
    font-size: 15px !important;
}

#featured .product-thumb .rating .fa-star,
#latest .product-thumb .rating .fa-star,
#bestseller .product-thumb .rating .fa-star,
#special .product-thumb .rating .fa-star {
    color: #f59e0b !important;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4)) !important;
}

#featured .product-thumb .rating .fa-star.off,
#latest .product-thumb .rating .fa-star.off,
#bestseller .product-thumb .rating .fa-star.off,
#special .product-thumb .rating .fa-star.off {
    color: #d1d5db !important;
    filter: none !important;
}

/* ==================== FÄ°YAT ==================== */
#featured .product-thumb .price,
#latest .product-thumb .price,
#bestseller .product-thumb .price,
#special .product-thumb .price {
    margin: auto 0 0 0 !important;
    padding: 20px 0 0 0 !important;
    text-align: center !important;
    border-top: 2px solid #e5e7eb !important;
}

#featured .product-thumb .price-new,
#latest .product-thumb .price-new,
#bestseller .product-thumb .price-new,
#special .product-thumb .price-new {
    color: #1e293b !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    display: block !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

#featured .product-thumb .price-old,
#latest .product-thumb .price-old,
#bestseller .product-thumb .price-old,
#special .product-thumb .price-old {
    color: #9ca3af !important;
    font-size: 16px !important;
    text-decoration: line-through !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ==================== STOK ==================== */
.stock-info {
    margin: 12px 0 !important;
    padding: 12px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #166534 !important;
    text-align: center !important;
    border: 2px solid #86efac !important;
}

.stock-info i.fa-check-circle {
    color: #22c55e !important;
    margin-right: 5px !important;
}

.stock-info i.fa-times-circle {
    color: #ef4444 !important;
    margin-right: 5px !important;
}

/* ==================== BUTON ==================== */
.btn-sepet,
.btn-success {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4) !important;
    transition: all 0.4s ease !important;
    margin: 20px 0 0 0 !important;
    display: block !important;
    width: 100% !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-sepet::after,
.btn-success::after {
    content: '→' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(50px) !important;
    opacity: 0 !important;
    transition: all 0.4s ease !important;
    font-size: 20px !important;
}

.btn-sepet:hover::after,
.btn-success:hover::after {
    transform: translateY(-50%) translateX(0) !important;
    opacity: 1 !important;
}

.btn-sepet:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.6) !important;
    padding-right: 50px !important;
}

/* ==================== MÄ°KTAR ==================== */
.input-group {
    margin: 15px 0 !important;
}

.input-group .form-control {
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.input-group .form-control:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

.input-group .btn {
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    font-weight: 700 !important;
}

.input-group .btn:hover {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: #fff !important;
    transform: scale(1.1) !important;
}

/* ==================== MOBÄ°L (0-767px) ==================== */
@media (max-width: 767px) {
    #featured, #latest, #bestseller, #special {
        padding: 30px 15px !important;
        margin: 20px 0 !important;
        border-radius: 15px !important;
    }
    
    #featured h2, #latest h2, #bestseller h2, #special h2, .urunbaslik {
        font-size: 22px !important;
        margin-bottom: 30px !important;
    }
    
    #featured .product-layout, #latest .product-layout,
    #bestseller .product-layout, #special .product-layout {
        padding: 8px !important;
    }
    
    #featured .product-thumb .caption, #latest .product-thumb .caption,
    #bestseller .product-thumb .caption, #special .product-thumb .caption {
        padding: 20px !important;
    }
    
    #featured .product-thumb h4, #latest .product-thumb h4,
    #bestseller .product-thumb h4, #special .product-thumb h4 {
        font-size: 16px !important;
        min-height: 48px !important;
    }
    
    #featured .product-thumb .price-new, #latest .product-thumb .price-new,
    #bestseller .product-thumb .price-new, #special .product-thumb .price-new {
        font-size: 22px !important;
    }
    
    .btn-sepet, .btn-success {
        padding: 14px 28px !important;
        font-size: 14px !important;
    }
}

/* ==================== TABLET (768-991px) ==================== */
@media (min-width: 768px) and (max-width: 991px) {
    #featured, #latest, #bestseller, #special {
        padding: 40px 18px !important;
    }
    
    #featured h2, #latest h2, #bestseller h2, #special h2, .urunbaslik {
        font-size: 28px !important;
    }
}

/* ==================== BÃœYÃœK EKRAN (1200px+) ==================== */
@media (min-width: 1200px) {
    #featured .product-layout, #latest .product-layout,
    #bestseller .product-layout, #special .product-layout {
        padding: 15px !important;
    }
}

/* ==================== PERFORMANS ==================== */
#featured .product-thumb, #latest .product-thumb,
#bestseller .product-thumb, #special .product-thumb {
    will-change: transform !important;
    backface-visibility: hidden !important;
}

/* ==================== VERSÄ°YON ==================== */
/* v8.0 - Neon Vurgular & Smooth Animasyonlar - 2026 */