/* blok: "bugün" şeridi (karşılama) — aramanın altında tek ince satır. Kutu arama kutusuyla aynı ölçüde (yükseklik, kenar,
   köşe), zemin kartların yüzeyi; öğeler mono, aralarında ince ayraç. Telefonda alt satıra geçer, yatay kaydırma yok. */

.bugun { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; min-height: 40px; margin: 0; padding: 6px 12px;
         background: var(--bb-surface-3); border: 1px solid var(--bb-border-2); border-radius: var(--bb-radius);
         color: var(--bb-text-dim); font: 12px var(--bb-font-mono); }
.bugun > * { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* ayraç: öğeler arasında ince dikey çizgi (ilk öğede yok) */
.bugun > * + *::before { content: ''; flex: none; width: 1px; height: 12px; margin: 0 10px 0 0; background: var(--bb-border-2); }
.bugun > * + * { margin-left: 10px; }
.bugun-tarih { color: var(--bb-text-strong); font-weight: 500; }
.bugun-tarih, .bugun-bilgi { flex: none; white-space: nowrap; }   /* sabit parçalar kırılmaz; yer darsa öneri yuvası kısalır */
.bugun-gunes { color: var(--bb-gold); }

/* bölüm satırı (ör. sayaç): nokta modül renginde; tıklama alanı satır yüksekliği kadar */
:where(.bugun-oge) { --renk: var(--bb-gold); }
.bugun-oge { padding: 4px 0; color: var(--bb-text); text-decoration: none; }
/* öneri yuvası (↻ olan şerit): masaüstünde tek satır — yuva kalan yeri alır, uzun metin kısalır (…) */
@media (min-width: 761px) {
  .bugun[data-bugun] { flex-wrap: nowrap; }
  /* ad önce: yer darsa önce ek (link açıklaması vb.) kısalır (büzülme payı çok yüksek), sonra ad; ikisi de … ile.
     Yuva taşanı keser: ↻'nin üstüne hiçbir şey binmez. */
  .bugun[data-bugun] .bugun-oge { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .bugun[data-bugun] .bugun-metin { flex: 0 1 auto; min-width: 0; max-width: 30ch; }
  .bugun[data-bugun] .bugun-ek { flex: 0 1000 auto; min-width: 0; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
}
.bugun-oge .bb-nokta { width: 6px; height: 6px; }
.bugun-metin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; font-family: var(--bb-font-sans); font-size: 13px; }
.bugun-ek { color: var(--bb-text-subtle); white-space: nowrap; }
a.bugun-oge:hover .bugun-metin, a.bugun-oge:focus-visible .bugun-metin { color: var(--bb-text-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ↻ (karışık açıkken, blok/bugun.js): sağ uca yaslı; tıklama alanı şerit yüksekliği kadar, kare */
.bugun-yenile { flex: none; margin: -4px -6px -4px auto !important; min-width: 36px; min-height: 34px; padding: 0; justify-content: center;
                background: none; border: 0; border-radius: var(--bb-radius); color: var(--bb-text-dim); font: 16px/1 var(--bb-font-mono); cursor: pointer; }
.bugun-yenile:hover, .bugun-yenile:focus-visible { color: var(--bb-gold); background: var(--bb-surface); }
.bugun-yenile::before { display: none; }
.bugun-yenile.donuyor { animation: bugun-don .4s ease; }
@keyframes bugun-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bugun-yenile.donuyor { animation: none; } }

/* telefon: satır başına düşen öğede ayraç çizgisi kalmasın diye ayraçsız, aralıklı akış */
@media (max-width: 760px) {
  .bugun { gap: 2px 14px; padding: 8px 12px; }
  .bugun > * + * { margin-left: 0; }
  .bugun > * + *::before { display: none; }
  .bugun-metin { max-width: 18ch; }
}