/* ==========================================================================
   EFSANE CUMA KAMPANYA BÖLÜMÜ (MOBİL ÖNCELİKLİ - 390px & MASAÜSTÜ UYUMLU)
   ========================================================================== */
.ec-section {
    --ec-bg: #0A0A0F;
    --ec-card-bg: #12131C;
    --ec-red: #FF2D3D;
    --ec-orange: #FF6B00;
    --ec-border: rgba(255, 107, 0, 0.28);

    position: relative;
    margin-top: var(--sp-5);
    background: radial-gradient(circle at 50% 0%, rgba(255, 45, 61, 0.22) 0%, rgba(10, 10, 15, 0.98) 65%), var(--ec-bg);
    border: 1.5px solid var(--ec-border);
    border-radius: 20px;
    padding: 22px 14px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 45, 61, 0.14);
    isolation: isolate;
}

@media (min-width: 768px) {
    .ec-section { padding: 32px 28px; }
}

.ec-hidden { display: none !important; }

/* Arka Plan CSS Neon Işık Huzmeleri ve Kıvılcımlar */
.ec-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ec-beam {
    position: absolute;
    top: -35%;
    width: 55%;
    height: 140%;
    filter: blur(36px);
    opacity: 0.45;
    will-change: transform, opacity;
}

.ec-beam-left {
    left: -15%;
    background: linear-gradient(135deg, var(--ec-red) 0%, rgba(255, 107, 0, 0.4) 55%, transparent 80%);
    transform: rotate(-22deg);
    animation: ecBeamPulse 6s ease-in-out infinite alternate;
}

.ec-beam-right {
    right: -15%;
    background: linear-gradient(225deg, var(--ec-orange) 0%, rgba(255, 45, 61, 0.4) 55%, transparent 80%);
    transform: rotate(22deg);
    animation: ecBeamPulse 7s ease-in-out infinite alternate-reverse;
}

.ec-beam-center {
    top: -50%;
    left: 25%;
    width: 50%;
    height: 90%;
    background: radial-gradient(ellipse at center, rgba(255, 107, 0, 0.26) 0%, transparent 70%);
}

.ec-sparks { position: absolute; inset: 0; }

.ec-spark {
    position: absolute;
    bottom: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 0 8px var(--ec-orange), 0 0 14px var(--ec-red);
    opacity: 0;
    will-change: transform, opacity;
    animation: ecSparkFloat 5.5s linear infinite;
}

.ec-spark.s1 { left: 8%;  animation-delay: 0.2s; animation-duration: 4.8s; }
.ec-spark.s2 { left: 21%; animation-delay: 1.6s; animation-duration: 5.6s; }
.ec-spark.s3 { left: 34%; animation-delay: 0.9s; animation-duration: 6.2s; }
.ec-spark.s4 { left: 48%; animation-delay: 2.4s; animation-duration: 5.1s; }
.ec-spark.s5 { left: 63%; animation-delay: 0.5s; animation-duration: 5.9s; }
.ec-spark.s6 { left: 76%; animation-delay: 1.9s; animation-duration: 4.9s; }
.ec-spark.s7 { left: 88%; animation-delay: 3.1s; animation-duration: 6.0s; }
.ec-spark.s8 { left: 94%; animation-delay: 1.2s; animation-duration: 5.3s; }

@keyframes ecBeamPulse {
    0%   { opacity: 0.32; transform: scale(0.96) rotate(-18deg); }
    100% { opacity: 0.58; transform: scale(1.06) rotate(-25deg); }
}

@keyframes ecSparkFloat {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.85; }
    80%  { opacity: 0.65; }
    100% { transform: translate3d(-14px, -280px, 0) scale(1.15); opacity: 0; }
}

.ec-inner { position: relative; z-index: 1; }

/* Üst Başlık ve Rozetler */
.ec-header {
    text-align: center;
    margin-bottom: 18px;
}

.ec-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ec-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F8FAFC;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ec-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ec-red);
    box-shadow: 0 0 10px var(--ec-red);
}

.ec-max-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ec-red), var(--ec-orange));
    color: #FFF;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(255, 45, 61, 0.45);
}

/* 3B Krom/Beyaz Başlık + Turuncu Dış Çizgi + Parıltı */
.ec-title {
    position: relative;
    display: inline-block;
    font-size: clamp(30px, 8.5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 42%, #94A3B8 52%, #FFFFFF 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ec-orange);
    filter: drop-shadow(0 3px 0 #7C1D05) drop-shadow(0 6px 20px rgba(255, 45, 61, 0.5));
    margin-bottom: 6px;
}

.ec-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0 transparent;
    animation: ecTitleShimmer 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ecTitleShimmer {
    0%, 25% { background-position: 180% 0; }
    85%, 100% { background-position: -60% 0; }
}

.ec-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 16px;
}

/* Canlı Geri Sayım Kutuları */
.ec-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

.ec-time-box {
    min-width: 66px;
    padding: 8px 10px;
    background: rgba(18, 19, 28, 0.92);
    border: 1px solid rgba(255, 107, 0, 0.35);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ec-time-sec {
    border-color: var(--ec-red);
    box-shadow: 0 0 16px rgba(255, 45, 61, 0.3);
}

.ec-time-val {
    font-size: 20px;
    font-weight: 800;
    color: #FFF;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ec-time-sec .ec-time-val { color: var(--ec-red); }

.ec-time-lbl {
    font-size: 12px;
    font-weight: 700;
    color: #94A3B8;
    margin-top: 2px;
}

.ec-time-sep {
    font-size: 18px;
    font-weight: 800;
    color: var(--ec-orange);
}

/* Kategori Çipleri */
.ec-cats-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 2px 14px;
    justify-content: flex-start;
}
.ec-cats-bar::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .ec-cats-bar { justify-content: center; } }

.ec-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    min-height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #F8FAFC;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.ec-cat-chip i { color: var(--ec-orange); font-size: 14px; }
.ec-cat-chip:hover, .ec-cat-chip.active {
    background: linear-gradient(135deg, var(--ec-orange), var(--ec-red));
    border-color: transparent;
    color: #FFF;
    transform: translateY(-2px);
}
.ec-cat-chip:hover i, .ec-cat-chip.active i { color: #FFF; }

/* Fırsat Ürünleri Şeridi (Mobilde Yatay Scroll-Snap, Geniş Ekranda Grid) */
.ec-products-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 14px;
}
.ec-products-track::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
    .ec-products-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        overflow: visible;
    }
}

.ec-card {
    flex: 0 0 218px;
    max-width: 74vw;
    scroll-snap-align: start;
    background: var(--ec-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

@media (min-width: 1024px) {
    .ec-card { flex: initial; max-width: none; }
}

.ec-card:hover {
    transform: translateY(-3px);
    border-color: var(--ec-orange);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 107, 0, 0.2);
}

.ec-disc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--ec-red);
    color: #FFF;
    font-size: 13px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 45, 61, 0.5);
}

.ec-card-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #FFF;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ec-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 220ms ease;
}

.ec-card:hover .ec-card-media img { transform: scale(1.05); }

.ec-card-brand {
    font-size: 12px;
    font-weight: 800;
    color: var(--ec-orange);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ec-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #F8FAFC;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 8px;
}

.ec-card-prices {
    margin-top: auto;
    margin-bottom: 10px;
}

.ec-old-price {
    font-size: 12px;
    color: #94A3B8;
    text-decoration: line-through;
    font-weight: 500;
}

.ec-new-price {
    font-size: 17px;
    font-weight: 800;
    color: #FFF;
}

.ec-add-btn {
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ec-orange), var(--ec-red));
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 160ms ease, opacity 160ms ease;
}

.ec-add-btn:active { transform: scale(0.96); }

/* Alt Ana CTA ve Kampanya Bitti Kutusu */
.ec-footer {
    text-align: center;
    margin-top: 12px;
}

.ec-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ec-red), var(--ec-orange));
    color: #FFF;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 0 22px rgba(255, 45, 61, 0.5);
    animation: ecCtaPulse 2.4s ease-in-out infinite;
    transition: transform 180ms ease;
}

.ec-cta-btn:hover { transform: scale(1.03); }

@keyframes ecCtaPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 45, 61, 0.45); }
    50%      { box-shadow: 0 0 28px rgba(255, 107, 0, 0.8), 0 0 12px rgba(255, 45, 61, 0.6); }
}

.ec-expired-box {
    text-align: center;
    padding: 28px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin-bottom: 12px;
}
.ec-expired-box i { font-size: 28px; color: var(--ec-orange); margin-bottom: 8px; }
.ec-expired-box h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.ec-expired-box p { font-size: 13px; color: #94A3B8; }