/* ═══════════════════════════════════════════════════════════════════════
   DEMO ŞERİDİ

   Sayfanın firmanın resmi sitesi OLMADIĞINI kimsenin kaçıramayacağı
   yerde söyler ve içeriğin kaynağını gösterir. Kaldırılmaz.

   Bu yalnız nezaket değil, karışıklığa karşı yazılı kanıttır: firmanın
   adı, logosu ve fotoğraflarıyla kurulmuş herkese açık bir sayfanın
   resmi siteyle karıştırılmadığını gösteren şey bu şerittir.

   Renkler temanın değişkenlerinden okunur; tema tanımlamadıysa yedek
   değerlere düşer. Her markada ayrı ayrı renk yazmak GEREKMEZ.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --serit-h: 34px;
}

.demo-serit {
  position: sticky;
  top: 0;
  z-index: 120;
  height: var(--serit-h);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 var(--kenar, 1.25rem);
  background: var(--serit-zemin, var(--metin, #16150f));
  color: var(--serit-yazi, #f0ece5);
  border-bottom: 1px solid var(--serit-cizgi, var(--vurgu, var(--tugla, #b0552e)));
  font-family: var(--display, system-ui, sans-serif);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.demo-serit .nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--serit-nokta, var(--vurgu-ac, #cabda6));
  animation: serit-nabiz 2.4s ease-in-out infinite;
}
@keyframes serit-nabiz {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.3 }
}

.demo-serit .metin {
  color: color-mix(in srgb, var(--serit-yazi, #f0ece5) 78%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-serit .metin b { color: var(--serit-yazi, #fff); font-weight: 600 }
.demo-serit .metin a {
  color: var(--serit-yazi, #e4dcd0);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.demo-serit .cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--serit-nokta, var(--vurgu-ac, #cabda6));
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.demo-serit .cta:hover { text-decoration: underline; text-underline-offset: 3px }
.demo-serit .cta svg { width: 13px; height: 13px }

/* Telefonda uzun cümle sığmıyor; "Tasarım önerisi." ve düğme kalır —
   asıl uyarı yine görünür durumda. */
@media (max-width: 760px) {
  .demo-serit { font-size: 0.7rem; gap: 0.5rem }
  .demo-serit .metin .uzun { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .demo-serit .nokta { animation: none }
}

/* Yapışkan üst menü şeridin ALTINA yapışır. Sitenin kendi stilinde
   `.ust { top: 0 }` varsa bunu `top: var(--serit-h)` yap. */