/* Nordia · home.announcement_strip (Duyuru Şeridi)
 *
 * Tek satırlık duyuru şeridi. İki akış yönü vardır:
 *   .tf-annstrip--vertical   → aşağıdan yukarı (Swiper direction: vertical)
 *   .tf-annstrip--horizontal → sağdan sola     (Swiper direction: horizontal)
 *
 * Swiper dikey modda slayt yüksekliklerini konteynerin yüksekliğinden hesaplar,
 * bu yüzden şeridin yüksekliği MUTLAKA belirli olmalıdır (auto olamaz). Aynı
 * yükseklik yatay modda da şeridi tek satırda tutar.
 *
 * Şerit yüksekliği --tf-annstrip-h ile <section> üzerinden gelir; yazı stilleri
 * her duyurunun kendi ayarlarından (inline style) gelir.
 */

.tf-annstrip {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.tf-annstrip__viewport {
    width: 100%;
    height: var(--tf-annstrip-h, 40px);
}

.tf-annstrip .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tf-annstrip-h, 40px);
    text-align: center;
}

/* Tema geneli `.tf-swiper .swiper-slide > * { height: 100% }` (styles.css) kuralı
 * ürün kartları slaydı doldursun diye konmuş. Duyuru şeridinde ise metni şerit
 * boyunda bir kutuya çevirip yazıyı tepeye yapıştırır — dikeyde ortalanması için
 * yüksekliğin içeriğe göre olması gerekir. Seçici, kural yükleme sırasından
 * bağımsız kazansın diye tema kuralından daha yüksek özgüllükte tutuldu. */
.tf-annstrip .swiper-slide > .tf-annstrip__text,
.tf-annstrip .swiper-slide > .tf-annstrip__empty {
    height: auto;
}

/* Taban tipografi. Duyurunun kendi ayarları inline style olarak geldiği için
 * bu değerleri ezer; burada !important kullanılmamalıdır. */
.tf-annstrip__text {
    margin: 0;
    padding-inline: 12px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-annstrip__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Topbar sütun davranışı — marquee ile aynı (styles.css / theme-studio-shell.css
 * içinde home.marquee için tanımlı kuralların eşleniği). Bu olmadan `nowrap`
 * metin sütunu kendi genişliğine zorlar; sütunlar sığmaz ve üçüncü sütun alt
 * satıra taşarak şeridi yükseltip metni ortadan kaydırır. */
.tf-section[data-tf-type="layout.topbar"] .tf-section__slot:has(> .tf-section[data-tf-type="home.announcement_strip"]) {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

.tf-section[data-tf-type="layout.topbar"] .tf-section__slot > .tf-section[data-tf-type="home.announcement_strip"] {
    width: 100%;
    min-width: 0;
}

/* Topbar kendi kompakt satır ölçülerini verir; şerit o sütunun içinde kalmalı. */
.tf-section[data-tf-type="layout.topbar"] .tf-section[data-tf-type="home.announcement_strip"],
.tf-zone--header > .tf-section[data-tf-type="structural.row"]:has(.tf-section[data-tf-type="layout.topbar"])
    .tf-section[data-tf-type="home.announcement_strip"] {
    width: 100%;
    padding-block: 0 !important;
}

/* Bölüm yüksekliği (chrome) verildiyse şerit onu takip eder. */
.tf-section.tf-has-section-height[data-tf-type="home.announcement_strip"] .tf-annstrip,
.tf-section.tf-has-section-height[data-tf-type="home.announcement_strip"] .tf-annstrip__viewport {
    height: 100%;
}

@media (max-width: 767.98px) {
    .tf-annstrip__text {
        padding-inline: 8px;
        letter-spacing: 0.02em;
    }

    /* Mobilde topbar satırı grid'e dönüşür (theme-studio-shell.css) ve sütunlar
     * içeriklerine göre adlandırılmış alanlara yerleşir: "locale socials" /
     * "marquee marquee". Duyuru şeridi bu eşlemede yoktu, otomatik yerleşip
     * satırı taşırıyordu — marquee ile aynı tam genişlik alanına alıyoruz. */
    .tf-section[data-tf-type="layout.topbar"]
        .tf-section__slot:has(> .tf-section[data-tf-type="home.announcement_strip"]) {
        grid-area: marquee;
    }
}