/* ============================================================================
   PALET 53 ("Modern") — ÜST ŞERİT TASARIM KATMANI              17.09.2026
   ----------------------------------------------------------------------------
   Onaylanan tasarım (tuval üzerinden):
     • Üst şerit MOR (paletin kendi birincil rengi = --primary-green)
     • Duyuru metni ayrı bant yerine ÜST ŞERİDİN ORTASINDA, aynı satırda
     • Çikolatalar / Hediyelik çipleri: BEYAZ zemin + koyu (#1f2937) yazı
     • Sağdaki servis bağlantıları ve dil seçici mor zemine göre beyaz

   İZOLASYON (iki kat):
     1) Bu dosya header.php'de YALNIZ `$tema['header_palet'] === 'palet_53'` iken
        <link> edilir (palet_11 katmanıyla aynı desen).
     2) Buradaki her kural `.top-bar.tb-p53` altındadır; `tb-p53` sınıfı da yalnız
        palet_53'te basılır. Yani dosya yanlışlıkla yüklense bile başka palette
        TEK BİR kural eşleşmez.

   🔴 `[data-header-palet="palet_53"]` KULLANILMAZ: palet_53'ün header DÜZENİ
      palet_4'tür, o yüzden wrapper `data-header-palet="palet_4"` basar
      (kopya-palet tuzağı — palet_11 turunda da yazılıydı).

   §13 (eski/kopya siteler): dosya yoksa header.php sessizce atlar; markup'taki
   `tb-p53`/`tb-duyuru-p53` sınıfları eşleşmez ve üst şerit ESKİ hâliyle (açık
   zemin + ayrı duyuru bandı) çalışır. Renkler CSS DEĞİŞKENİNE bağlıdır →
   paletin moru panelden değişince şerit de değişir; «Özel CSS» bu dosyadan
   SONRA yüklendiği için yönetici son sözü söyleyebilir (bu yüzden aşağıda
   `!important` yalnız gerçekten gereken yerlerde — palet sızıntılarını yenmek
   için — kullanılmıştır).
   ============================================================================ */

/* ── Şeridin kendisi ──────────────────────────────────────────────────────── */
.top-bar.tb-p53 {
    background: var(--primary-green);
    border-bottom: 0;
    color: #fff;
}

/* Bağlantılar: mor üstünde beyaz.
   🔴 `!important` + (0,2,1) özgüllük ZORUNLU: paletlerin bir kısmı
   `[data-header-palet="palet_N"] .top-bar a { color: … !important }` yazar ve bu
   palet palet_4 düzenini kullandığı için o kurallar buraya SIZAR (ölçüldü).
   `.tb-sl` (beyaz çip) bilerek DIŞARIDA: kendi koyu mürekkebini korur. */
.top-bar.tb-p53 a:not(.tb-sl),
.top-bar.tb-p53 a:not(.tb-sl):hover,
.top-bar.tb-p53 a:not(.tb-sl):focus,
.top-bar.tb-p53 > .container > .d-flex > .d-flex > span:not(.tb-sl-grup) {
    color: #fff !important;
}
.top-bar.tb-p53 a:not(.tb-sl) i {
    color: rgba(255, 255, 255, .85) !important;
}
.top-bar.tb-p53 a:not(.tb-sl):hover {
    text-decoration: none;
    opacity: .85;
}

/* ── Duyuru (üst şeridin ortasında) ──────────────────────────────────────── */
/* Üç sütun: sol grup · duyuru (esner) · sağ grup. `justify-content: space-between`
   zaten gövdede; duyuru `flex:1` alarak ortada kalır ve dar ekranda taşmak yerine
   kısalır (üç nokta). `min-width:0` olmadan uzun duyuru sağ grubu ezerdi. */
.top-bar.tb-p53 > .container > .d-flex {
    gap: 24px;
    /* 🔴 SARMALA: sol grupta çok sabit link + uzun duyuru olduğunda duyuru tek satırda
       SIFIR genişliğe kadar eziliyordu (ölçüldü: 6 çip + 220 karakter → 1280px'te 42px,
       1100px'te 0px = duyuru sessizce kayboluyor). Sarmalama + `min-width` sayesinde
       duyuru sığmadığı anda KENDİ SATIRINA iner, kaybolmaz. */
    flex-wrap: wrap;
}
.top-bar.tb-p53 .tb-duyuru-p53 {
    flex: 1 1 320px;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-bar.tb-p53 .tb-duyuru-p53 i {
    flex: 0 0 auto;
    font-size: 13px;
    color: #fff;
}
/* Daktilo yazarken metin uzunluğu değişir; kaydırma/zıplama olmasın diye
   taşan kısım kırpılır (metin elemanı esner, ikon sabit kalır). */
.top-bar.tb-p53 .tb-duyuru-p53 .typewriter-duyuru {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sabit link çipleri: BEYAZ zemin + koyu yazı (kullanıcı onayı) ────────── */
/* Zemin/mürekkep style.css'teki `--tb-sl-renk / --tb-sl-zemin` değişkenlerinden
   gelir (orada `!important` ile korunuyor) → burada yalnız mor üstünde okunur
   kenar + gölge veriyoruz. Yazı rengine DOKUNMUYORUZ ki yönetici değişkenle
   ezebilsin. */
.top-bar.tb-p53 .tb-sl {
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.top-bar.tb-p53 .tb-sl:hover {
    border-color: rgba(255, 255, 255, .6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

/* ── Dil seçici (js/translate-widget.js üretir, yuvası Sipariş Takibi'nin yanı) ─ */
/* Widget kendi stilini <style> ile SAYFAYA SONRADAN basar; bu yüzden özgüllük
   (0,3,0) ile yeniyoruz — kaynak sırasına güvenilmez. */
.top-bar.tb-p53 .tb-dil-yuva .translate-btn {
    height: 32px;
    padding: 0 10px 0 6px;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.top-bar.tb-p53 .tb-dil-yuva .translate-btn:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
}
.top-bar.tb-p53 .tb-dil-yuva .translate-current,
.top-bar.tb-p53 .tb-dil-yuva .translate-label {
    color: #fff;
}
.top-bar.tb-p53 .tb-dil-yuva .translate-arrow {
    color: rgba(255, 255, 255, .8);
}
/* 🔴 Buradaki eski "beyaz kutu" kuralı KALDIRILDI (17.09.2026): bayraklar artık
   modülün kendi SVG katmanından geliyor ve `.top-bar.tb-p53 …` (0,4,0) modülün
   `[data-cc]` kuralını (0,3,0) yendiği için bayrağı gizliyordu — ölçüldü.
   SVG'si olmayan bir dilde eleman emoji/harf olarak kalır; şeridin kendi beyaz
   mürekkebiyle mor üstünde okunur. */
/* 🔴 Açılır liste beyaz paneldir; şeridin BEYAZ mürekkebi ona SIZMAMALI.
   Eski çözüm (`… a, … button { color: inherit !important }`) tam tersini yapıyordu:
   buton `inherit` ile yuvadan (beyaz) rengi alıyor, kendi rengi olmayan alt öğeler
   beyaz-üstü-beyaz kalıyordu (ölçüldü: dil kodu kontrast 1.0 — bugün `display:none`
   olduğu için görünmüyordu, yani sessiz bir tuzaktı).
   Doğrusu: kalıtım zincirini panelin SINIRINDA kesmek. Kendi rengi olan öğeler
   (başlık #fff, dil adı #1e293b, onay tiki yeşil) etkilenmez. */
.top-bar.tb-p53 .tb-dil-yuva .translate-dropdown {
    color: #334155;
}

/* ── Dar masaüstü (992–1199px): duyuru GİZLENMEZ, sıkışır ────────────────── */
/* 🔴 `display:none` BİLEREK YOK: üst şerit 992px'ten itibaren görünür ve duyuru
   artık YALNIZ burada basılıyor; gizlense o aralıkta duyuru tamamen kaybolurdu
   (ayrı bant suppress edilmiş durumda). Bunun yerine boşluk/punto küçülür ve
   metin üç nokta ile kırpılır — duyuru her zaman görünür kalır. */
@media (max-width: 1199.98px) {
    .top-bar.tb-p53 > .container > .d-flex { gap: 14px; }
    .top-bar.tb-p53 .tb-duyuru-p53 { font-size: 12px; gap: 6px; }
}

/* ── DİL SEÇİCİ BAYRAKLARI ────────────────────────────────────────────────── */
/* Bayrakların KENDİSİ artık modülün işi: js/translate-widget.js kendi enjekte
   ettiği CSS'te `[data-cc]` üzerinden yerel SVG basıyor → HER Header Tasarım
   Paletinde görünür (17.09.2026 kullanıcı kararı; önce yalnız bu palette idi).
   Burada kalan tek şey mor zemine ait dokunuş: beyaz halka. Kural `[data-cc]`
   taşıyan her bayrağa uygulanır; SVG'si olmayan dilde eleman yukarıdaki beyaz
   kutu + emoji hâlinde kalır, halka orada da yakışır. */
.top-bar.tb-p53 .tb-dil-yuva .translate-flag[data-cc] {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .45);
}