/* ==========================================================================
   November 2026 campaign banner — "Black Week" (EN) / "Muhteşem Kasım" (TR),
   homepage, above the hero. A single-row web-banner strip (~250px tall on
   desktop) built from the designer's layers; .bw--en / .bw--tr pick the artwork:
       EN  [ wall ] [ offer: 50%, regions, countdown ] [ seats panel + CTA ]
       TR  [ wall ] [ offer: %25 + "Yılın En İyi", countdown ] [ 12 Taksit + CTA ]
   Countdown and seats are deliberately apart. Below 1024px: blocks stacked
   (1024 itself — iPad landscape — keeps the row; it fits from 1025 down to ~1000).
   Text uses the type tokens; colours come from tokens.css. Radius: var(--radius).
   ========================================================================== */

/* No z-index / transform here on purpose: the wall video blends (lighten) with
   this background, which only works while no stacking context sits in between. */
.bw {
    overflow: hidden;
    background: var(--dark) center / cover no-repeat;
    color: var(--white);
}

/* Per-site artwork. --bw-wall-shift: the video frame keeps a little black margin
   left of the wall (invisible after the blend); shifting it out puts the lit wall's
   edge on the content edge. EN: wall starts at column 82 of 1456 in the last frame
   (5.6%); TR: 12 of 1386 (0.9%). */
.bw--en {
    --bw-wall-shift: -5.6%;
    background-image: url(../img/black-week/en/bg-2560.webp);
}

.bw--tr {
    --bw-wall-shift: -0.9%;
    background-image: url(../img/black-week/tr/bg-2560.webp);
}

/* The TR wall is a flatter strip (MUHTEŞEM KASIM, 4:1 vs 2.9:1), and the TR right
   column is narrower than the EN seats panel: let the wall use the freed width. */
.bw--tr .bw__wall {
    width: min(100%, 560px);
}

/* TR: the NET %25 artwork (and the stamp sized from it) a touch smaller than EN's 340px. */
.bw--tr .bw__discount {
    width: min(100%, 320px);
}

/* TR: the countdown title steps back in grey (asked for; the numbers stay white). */
.bw--tr .bw__countdown-title {
    color: var(--gray-400);
}

.bw img,
.bw video {
    display: block;
    width: 100%;
    height: auto;
}

.bw__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    grid-template-areas: "wall offer seats";
    align-items: center;
    column-gap: var(--space-xl);
    padding-block: var(--space-md);
}

/* base.css gives every <p> --color-black; all text here sits on the dark artwork. */
.bw p {
    color: var(--white);
}

/* ── "BLACK WEEK" / "MUHTEŞEM KASIM" wall, pushed to the left edge ──────────
   The video's backdrop is pure black; `lighten` drops it so the technical
   drawing shows through, while the lit wall stays on top. */
.bw__wall {
    grid-area: wall;
    justify-self: start;
    width: min(100%, 480px);
    mix-blend-mode: lighten;
    transform: translateX(var(--bw-wall-shift));
}

/* ── Offer: discount artwork, regions line, countdown ─────────────────────── */
.bw__offer {
    grid-area: offer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.bw__discount {
    position: relative; /* anchors the "Yılın En İyi" overlay (TR) */
    width: min(100%, 340px);
}

/* TR: the round "YILIN EN İYİ / TEKLİFİ ✶" stamp on the top-right corner of the
   NET %25 artwork — over the empty space above the % sign, touching the 5. */
.bw .bw__best {
    position: absolute;
    top: -10%; /* any higher and the banner's overflow clips the ring's top */
    right: -8%;
    width: 42%;
}

/* "→ Certain Regions Only ←" */
.bw__regions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: 1.2;
    white-space: nowrap;
}

.bw__arrow {
    flex: none;
    height: 1em;
}

.bw .bw__arrow img {
    width: auto;
    height: 100%;
}

/* The supplied arrow points left; the one before the text points right. */
.bw__arrow--in-left img {
    transform: scaleX(-1);
}

/* "Offer Ends In [21][09][54][04]" — black unit boxes like the artwork's text boxes.
   zoom .8: the whole block 20% smaller while its sizes stay on the type tokens
   (the next token down would shrink the numbers by ~30%). */
.bw__countdown {
    zoom: 0.8;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
}

.bw__countdown-title {
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.2;
}

.bw__countdown-cells {
    display: flex;
    gap: var(--space-xs);
}

/* <dt> comes first in the markup (valid <dl>); the number shows on top. */
.bw__countdown-cell {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    min-width: var(--space-3xl);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-black);
    border-radius: var(--radius);
}

.bw__countdown-num {
    font-size: var(--fs-subheading);
    font-weight: 500;
    line-height: 1.1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.bw__countdown-label {
    font-size: var(--fs-caption);
    line-height: 1.2;
    color: var(--white);
}

/* ── Right column: seats panel (EN) or installments badge (TR), CTA under it ── */
/* Stretched to the row height: the panel's top lines up with the top of the
   50% artwork, the button with the bottom of the countdown, and the space
   between them opens up (never less than --space-lg). */
.bw__aside {
    grid-area: seats;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-lg);
}

/* TR has no panel to align with: badge and button sit together, centred. */
.bw--tr .bw__aside {
    justify-content: center;
    align-items: center;
}

/* Narrower than the panel (not flush with it), centred under it. Also wins over
   the theme's ≤480px full-width .btn rule, so phones get the same proportion. */
.bw__cta {
    align-self: center;
    width: 80%;
}

/* "Peşin Fiyatına / [12] Taksit" — a lead line over the designer's starburst with
   its label beside it. */
.bw__installments {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    line-height: 1.1;
    white-space: nowrap;
}

.bw__installments-lead {
    font-size: var(--fs-body);
    font-weight: 500;
}

.bw__installments-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--fs-subheading);
    font-weight: 700;
}

.bw .bw__installments img {
    width: 120px;
}

.bw-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    /* One line style for the outer border and both inner rules: 1px, --gray-400 at 75%. */
    --bw-line: 1px solid color-mix(in srgb, var(--gray-400) 75%, transparent);
    background: color-mix(in srgb, var(--color-black) 60%, transparent);
    border: var(--bw-line);
    border-radius: var(--radius);
    font-family: var(--font-display);
    text-align: center;
}

.bw-panel__title {
    padding-bottom: var(--space-sm);
    border-bottom: var(--bw-line);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    line-height: 1.3;
}

.bw-panel__cells {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: space-around;
    gap: var(--space-lg);
}

/* Label on top, number at the bottom: numbers stay on one line even when a
   label wraps (narrow phones, long translations). */
.bw-panel__cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bw-panel__label {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.3;
    color: var(--white);
    white-space: nowrap;
}

.bw-panel__num {
    font-size: var(--fs-subheading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

/* "Sold Out" stays red so a closed region stands out from the white numbers. */
.bw-panel__num--out {
    font-size: var(--fs-body);
    line-height: 2; /* keeps the row height of the numbers */
    color: var(--red);
}

/* "—— Limited to 30 Seats Per Region ——" */
.bw-panel__foot {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--fs-caption);
    line-height: 1.3;
    white-space: nowrap;
}

.bw-panel__foot::before,
.bw-panel__foot::after {
    content: "";
    flex: 1;
    border-top: var(--bw-line);
}

.bw-panel__foot strong {
    font-weight: 700;
    color: var(--white);
}

/* ── Mobile: vertical stack ────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .bw--en {
        background-image: url(../img/black-week/en/bg-1280.webp);
    }

    .bw--tr {
        background-image: url(../img/black-week/tr/bg-1280.webp);
    }

    .bw__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "wall"
            "offer"
            "seats";
        justify-items: center;
        row-gap: var(--space-lg);
        padding-block: var(--space-lg);
    }

    .bw__wall {
        justify-self: center;
        transform: none;
    }

    .bw__aside {
        width: min(100%, 480px);
    }
}

/* Narrow phones: smaller region labels, a tighter panel, and long region names
   ("Amérique latine", "Oriente Medio"…) may wrap instead of spilling out. */
@media (max-width: 480px) {
    /* The stamp would touch the screen edge: keep it on the artwork. */
    .bw .bw__best {
        right: -2%;
    }

    .bw-panel {
        padding-inline: var(--space-md);
    }

    .bw-panel__cells {
        gap: var(--space-sm);
    }

    .bw-panel__label {
        font-size: var(--fs-caption);
        white-space: normal;
    }
}