/* ============================================
   COMMERCE CORE — Sales Engine Widgets
   Flash sale şeridi + geri sayım, öneri blokları,
   paket (bundle) teklifi, hesap sadakat paneli.
   Premium tema değişkenlerini kullanır.
   ============================================ */

/* ---- Flash sale şeridi ---- */
.flash-strip {
    background: linear-gradient(135deg, var(--color-primary, #24190F) 0%, #3A2B1C 60%, #4C3319 100%);
    color: #F7F4EE;
    border-radius: var(--radius-lg, 22px);
    padding: 1.4rem 1.6rem;
    margin: 1.6rem 0;
    box-shadow: var(--shadow-lg, 0 18px 44px -16px rgba(43, 33, 24, 0.22));
    overflow: hidden;
    position: relative;
}
.flash-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 200px at 90% -20%, rgba(176, 136, 73, .35), transparent 70%);
    pointer-events: none;
}
.flash-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    position: relative;
}
.flash-strip__title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.flash-strip__title .bolt { color: var(--color-brass, #B08849); font-size: 1.2em; }
.flash-countdown { display: flex; align-items: center; gap: .45rem; }
.flash-countdown__cell {
    background: rgba(247, 244, 238, .12);
    border: 1px solid rgba(247, 244, 238, .18);
    border-radius: var(--radius-sm, 8px);
    min-width: 52px;
    padding: .4rem .35rem;
    text-align: center;
    backdrop-filter: blur(4px);
}
.flash-countdown__num { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.flash-countdown__label { font-size: .6rem; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; margin-top: .25rem; }
.flash-countdown__sep { font-weight: 700; opacity: .5; }
.flash-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .9rem;
    position: relative;
}
.flash-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    background: rgba(247, 244, 238, .07);
    border: 1px solid rgba(247, 244, 238, .12);
    border-radius: var(--radius, 14px);
    padding: .6rem;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, background .2s ease;
}
.flash-item:hover { transform: translateY(-3px); background: rgba(247, 244, 238, .13); }
.flash-item__img {
    width: 58px; height: 58px;
    border-radius: var(--radius-sm, 8px);
    object-fit: cover;
    background: rgba(247, 244, 238, .15);
    flex-shrink: 0;
}
.flash-item__name {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.flash-item__prices { margin-top: .25rem; display: flex; align-items: baseline; gap: .45rem; }
.flash-item__old { font-size: .74rem; text-decoration: line-through; opacity: .6; }
.flash-item__new { font-size: .95rem; font-weight: 700; color: var(--color-brass, #B08849); }

/* Ürün detayındaki kompakt flash bandı */
.flash-badge-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, #4C3319, var(--color-primary, #24190F));
    color: #F7F4EE;
    border-radius: var(--radius, 14px);
    padding: .8rem 1.1rem;
    margin: 0 0 1.2rem;
    box-shadow: var(--shadow-md, 0 6px 18px -8px rgba(43, 33, 24, .16));
}
.flash-badge-bar__label { font-weight: 700; display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.flash-badge-bar__label .bolt { color: var(--color-brass, #B08849); }
.flash-badge-bar .flash-countdown__cell { min-width: 44px; padding: .3rem .3rem; }
.flash-badge-bar .flash-countdown__num { font-size: 1.05rem; }

/* ---- Öneri blokları ---- */
.rec-section { margin: 2.4rem 0; }
.rec-section__title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    color: var(--color-text-main, #2B2118);
    margin-bottom: .35rem;
}
.rec-section__sub { color: var(--color-text-muted, #6E6255); font-size: .9rem; margin-bottom: 1.2rem; }

/* ---- Bundle (paket) teklifi ---- */
.bundle-offer {
    border: 1px solid var(--color-border-strong, #D8CDB9);
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 22px);
    padding: 1.4rem;
    margin: 1.4rem 0;
    box-shadow: var(--shadow-md, 0 6px 18px -8px rgba(43, 33, 24, .16));
}
.bundle-offer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bundle-offer__name { font-family: var(--font-serif, Georgia, serif); font-size: 1.2rem; color: var(--color-text-main, #2B2118); }
.bundle-offer__save {
    background: var(--color-accent-soft, #E1EFEC);
    color: var(--color-accent, #0E756B);
    font-weight: 700;
    font-size: .82rem;
    border-radius: 999px;
    padding: .3rem .8rem;
}
.bundle-offer__items { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bundle-offer__item { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 96px; text-decoration: none; }
.bundle-offer__item img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius, 14px); border: 1px solid var(--color-border, #E7DFD1); }
.bundle-offer__item span { font-size: .72rem; color: var(--color-text-muted, #6E6255); text-align: center; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bundle-offer__plus { font-size: 1.3rem; color: var(--color-text-light, #A6998A); font-weight: 300; }
.bundle-offer__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px dashed var(--color-border-strong, #D8CDB9); padding-top: 1rem; }
.bundle-offer__prices { display: flex; align-items: baseline; gap: .7rem; }
.bundle-offer__old { text-decoration: line-through; color: var(--color-text-light, #A6998A); font-size: .95rem; }
.bundle-offer__new { font-size: 1.4rem; font-weight: 700; color: var(--color-text-main, #2B2118); font-family: var(--font-serif, Georgia, serif); }

/* ---- Hesap: sadakat paneli ---- */
.loyalty-panel {
    background: linear-gradient(135deg, var(--color-primary, #24190F), #3A2B1C);
    color: #F7F4EE;
    border-radius: var(--radius-lg, 22px);
    padding: 1.5rem;
    margin-top: 1.4rem;
    box-shadow: var(--shadow-md, 0 6px 18px -8px rgba(43, 33, 24, .16));
}
.loyalty-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.loyalty-panel__title { font-family: var(--font-serif, Georgia, serif); font-size: 1.2rem; display: flex; gap: .5rem; align-items: center; }
.loyalty-panel__vip { background: var(--color-brass, #B08849); color: #fff; font-size: .72rem; letter-spacing: 1px; font-weight: 700; border-radius: 999px; padding: .3rem .8rem; }
.loyalty-panel__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; }
.loyalty-stat { background: rgba(247, 244, 238, .08); border: 1px solid rgba(247, 244, 238, .14); border-radius: var(--radius, 14px); padding: .9rem 1rem; }
.loyalty-stat__val { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.loyalty-stat__label { font-size: .74rem; opacity: .75; margin-top: .2rem; letter-spacing: .4px; }
.loyalty-panel__hint { font-size: .78rem; opacity: .7; margin-top: 1rem; line-height: 1.5; }
.loyalty-history { margin-top: 1rem; border-top: 1px solid rgba(247, 244, 238, .14); padding-top: .8rem; }
.loyalty-history__row { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; padding: .35rem 0; opacity: .9; }
.loyalty-history__row span:last-child { font-weight: 700; white-space: nowrap; }

/* Responsive */
@media (max-width: 640px) {
    .flash-strip { padding: 1.1rem; }
    .flash-strip__grid { grid-template-columns: 1fr 1fr; }
    .flash-item { flex-direction: column; align-items: flex-start; }
    .bundle-offer__item { width: 76px; }
    .bundle-offer__item img { width: 68px; height: 68px; }
}