/* ============================================================
   AWP Promo Bar — Kampanya Şeridi
   JS tarafından position:fixed yapılır; overflow container
   sorununu aşmak için bu tercih edildi.
   ============================================================ */

#awp-promo-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10100;
    /* position:fixed/top/left/right/z-index → JS tarafından setProperty ile güçlendirilir */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 8px 0 16px;
    min-height: 54px;
    box-sizing: border-box;
    /* arka plan inline style ile override edilir */
    background: linear-gradient(135deg, #f97316, #ec4899 55%, #6366f1);
    color: #fff;
    flex-shrink: 0;
    margin: 0;
}

/* Görsel arka plan bindirmesi */
#awp-promo-bar.awp-promo-bar--has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.36);
    pointer-events: none;
}

#awp-promo-bar > * { position: relative; }

/* Kapatıldığında */
#awp-promo-bar.is-dismissed { display: none !important; }

/* ── Emoji/İkon ──────────────────────────────────────────────── */
.awp-promo-bar__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    animation: awp-promo-pulse 3s ease-in-out infinite;
}

@keyframes awp-promo-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.14); }
}

/* ── Metin: tek satır, iri, yan yana ────────────────────────── */
.awp-promo-bar__content {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.awp-promo-bar__main {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.awp-promo-bar__sep {
    opacity: 0.38;
    font-weight: 300;
    flex-shrink: 0;
}

.awp-promo-bar__sub {
    font-size: 0.90rem;
    font-weight: 500;
    opacity: 0.88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sağ grup: sayaç + kupon + link ─────────────────────────── */
.awp-promo-bar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   SAYAÇ — 4 birim, her zaman görünür (≤400px hariç)
   ════════════════════════════════════════════════════════════ */
.awp-promo-bar__countdown {
    display: flex;
    align-items: center;
    gap: 3px;
}

.awp-promo-bar__cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.awp-promo-bar__cd-value { display: flex; gap: 2px; }

.awp-promo-bar__cd-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 34px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.awp-promo-bar__cd-digit::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.20);
    pointer-events: none;
}

.awp-promo-bar__cd-digit.awp-flip {
    animation: awp-cd-flip 0.18s ease forwards;
}

@keyframes awp-cd-flip {
    0%   { transform: scaleY(1); }
    40%  { transform: scaleY(0); }
    60%  { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

.awp-promo-bar__cd-label {
    font-size: 0.57rem;
    font-weight: 700;
    opacity: 0.70;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

.awp-promo-bar__cd-sep {
    font-size: 1.20rem;
    font-weight: 900;
    opacity: 0.48;
    margin: 0 1px;
    margin-bottom: 14px;
    line-height: 1;
    align-self: flex-end;
}

/* ── İndirim Yüzdesi Sütunu ──────────────────────────────────── */
.awp-promo-bar__discount-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 4px 10px;
    min-width: 56px;
    line-height: 1.1;
}

.awp-promo-bar__discount-pct {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

.awp-promo-bar__discount-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    opacity: 0.80;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

/* ── Kupon ───────────────────────────────────────────────────── */
.awp-promo-bar__coupon {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.awp-promo-bar__coupon-hint {
    font-size: 0.68rem;
    opacity: 0.80;
    font-weight: 600;
    white-space: normal;      /* 2 satıra sığsın */
    line-height: 1.35;
    max-width: 66px;           /* ~2 satır genişliği */
    text-align: right;
}

.awp-promo-bar__coupon-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px dashed rgba(255, 255, 255, 0.50);
    border-radius: 6px;
    padding: 4px 10px;
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.awp-promo-bar__coupon-box:hover  { background: rgba(255,255,255,0.26); transform: scale(1.04); }

.awp-promo-bar__coupon-code {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.awp-promo-bar__coupon-copy-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.70rem;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}
.awp-promo-bar__coupon-copy-btn:hover  { background: rgba(255,255,255,0.40); }
.awp-promo-bar__coupon-copy-btn.copied { background: rgba(16,185,129,0.45); }

/* ── Link butonu ─────────────────────────────────────────────── */
.awp-promo-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 0.80rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.awp-promo-bar__link:hover {
    background: rgba(255,255,255,0.32);
    transform: scale(1.03);
    color: inherit;
    text-decoration: none;
}

/* ── Kapat — en sağda, flex item ─────────────────────────────── */
.awp-promo-bar__close {
    all: unset;
    cursor: pointer;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s, transform 0.18s;
}
.awp-promo-bar__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.42);
    transform: scale(1.18);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ≤1100px: kupon ipucu gizle */
@media (max-width: 1100px) {
    .awp-promo-bar__coupon-hint { display: none; }
}

/* ≤860px tablet: alt metin + ayırıcı gizle */
@media (max-width: 860px) {
    #awp-promo-bar { gap: 10px; padding: 0 8px; }
    .awp-promo-bar__sub { display: none; }
    .awp-promo-bar__sep { display: none; }
}

/* ≤640px: sayaç ve metin küçült */
@media (max-width: 640px) {
    #awp-promo-bar          { gap: 8px; min-height: 48px; }
    .awp-promo-bar__main    { font-size: 0.92rem; }
    .awp-promo-bar__icon    { font-size: 1.25rem; }
    .awp-promo-bar__cd-digit{ width: 21px; height: 27px; font-size: 0.84rem; }
    .awp-promo-bar__cd-label{ font-size: 0.50rem; }
    .awp-promo-bar__cd-sep  { font-size: 0.95rem; margin-bottom: 9px; }
    .awp-promo-bar__link    { padding: 4px 9px; font-size: 0.75rem; }
    .awp-promo-bar__coupon-code { font-size: 0.80rem; }
}

/* ≤480px mobil: iki satır, sayaç küçük ama görünür */
@media (max-width: 480px) {
    #awp-promo-bar {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 8px 10px;
        gap: 6px;
        min-height: auto;
        align-items: flex-start;
    }

    /* 1. satır: icon + metin + kapat */
    .awp-promo-bar__icon    { order: 1; align-self: center; }
    .awp-promo-bar__content { order: 2; flex: 1 1 0; align-self: center; }
    .awp-promo-bar__main    { font-size: 0.86rem; white-space: normal; }
    .awp-promo-bar__close   { order: 3; margin-left: auto; align-self: flex-start; margin-top: 1px; }

    /* 2. satır: sağ grup tam genişlik, ortalı */
    .awp-promo-bar__right {
        order: 4;
        flex-basis: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 4px;
    }

    /* Mobilde sayaç daha küçük ama görünür */
    .awp-promo-bar__cd-digit{ width: 19px; height: 24px; font-size: 0.78rem; }
    .awp-promo-bar__cd-label{ font-size: 0.48rem; }
    .awp-promo-bar__cd-sep  { font-size: 0.85rem; margin-bottom: 8px; }
}

/* ≤360px: link, kopyala ve indirim badge gizle */
@media (max-width: 360px) {
    .awp-promo-bar__link            { display: none; }
    .awp-promo-bar__coupon-copy-btn { display: none; }
    .awp-promo-bar__discount-badge  { display: none; }
}