/* =================================================================
   Demo banner — D4 2026-06-07
   Eski inline style block silindi; tek class-based + token-aware.
   - z-index var(--tm-z-demo-banner) = 1042 (content üstü)
   - header dropdown menüleri --tm-z-header-dropdown=1045 banner üstünde
   - modal-backdrop (1050) / modal (1055) banner üstünde
   - prefers-reduced-motion ile animasyonlar kapanır
   - Light + dark mode token-aware
   ================================================================= */

.tm-demo-banner {
  position: sticky;
  top: 0;
  z-index: var(--tm-z-demo-banner, 1042);

  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;

  /* Modern amber gradient */
  background: linear-gradient(90deg, #fef3c7 0%, #fde68a 35%, #fcd34d 100%);
  color: #78350f;
  border-bottom: 1px solid rgba(146, 64, 14, 0.18);
  box-shadow: 0 2px 6px rgba(146, 64, 14, 0.10);

  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -0.005em;

  /* Subtle entrance — slide down + fade in */
  animation: tmDemoBannerEnter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  will-change: transform, opacity;
}

@keyframes tmDemoBannerEnter {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.tm-demo-banner__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(146, 64, 14, 0.12);
  color: #92400e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tm-demo-banner__icon svg,
.tm-demo-banner__icon i {
  width: 16px;
  height: 16px;
}

.tm-demo-banner__title {
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.005em;
}

.tm-demo-banner__text {
  flex: 1 1 auto;
  min-width: 12rem;
  color: #78350f;
  opacity: 0.92;
}

/* CTA — primary action */
.tm-demo-banner__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
  background: #92400e;
  color: #fffbeb;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  transition:
    background 0.18s ease,
    transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.18s ease;
}
.tm-demo-banner__cta:hover,
.tm-demo-banner__cta:focus-visible {
  background: #7c2d12;
  color: #fffbeb;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(124, 45, 18, 0.4);
  text-decoration: none;
}
.tm-demo-banner__cta-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.tm-demo-banner__cta:hover .tm-demo-banner__cta-icon {
  transform: translateX(2px);
}

/* Dismiss button — session-only hide */
.tm-demo-banner__dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(146, 64, 14, 0.20);
  background: rgba(255, 251, 235, 0.4);
  color: #78350f;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease;
}
.tm-demo-banner__dismiss:hover,
.tm-demo-banner__dismiss:focus-visible {
  background: rgba(146, 64, 14, 0.12);
  color: #92400e;
  outline: none;
}
.tm-demo-banner__dismiss:active {
  transform: scale(0.94);
}
.tm-demo-banner__dismiss svg,
.tm-demo-banner__dismiss i {
  width: 14px;
  height: 14px;
}

/* Dark mode — amber tonu daha düşük saturation, dark text korunur */
html.dark-mode .tm-demo-banner {
  background: linear-gradient(90deg, rgba(252, 211, 77, 0.18) 0%, rgba(245, 158, 11, 0.22) 100%);
  color: #fde68a;
  border-bottom-color: rgba(252, 211, 77, 0.20);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
html.dark-mode .tm-demo-banner__icon {
  background: rgba(252, 211, 77, 0.18);
  color: #fde68a;
}
html.dark-mode .tm-demo-banner__text {
  color: #fde68a;
  opacity: 0.86;
}
html.dark-mode .tm-demo-banner__cta {
  background: #b45309;
  color: #fffbeb;
}
html.dark-mode .tm-demo-banner__cta:hover,
html.dark-mode .tm-demo-banner__cta:focus-visible {
  background: #d97706;
  box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.5);
}
html.dark-mode .tm-demo-banner__dismiss {
  background: rgba(252, 211, 77, 0.08);
  color: #fde68a;
  border-color: rgba(252, 211, 77, 0.22);
}
html.dark-mode .tm-demo-banner__dismiss:hover,
html.dark-mode .tm-demo-banner__dismiss:focus-visible {
  background: rgba(252, 211, 77, 0.18);
}

/* Tablet — daha sıkı padding, CTA aynı satır */
@media (max-width: 768px) {
  .tm-demo-banner {
    padding: 9px 14px;
    gap: 10px;
    font-size: 12.5px;
  }
  .tm-demo-banner__cta {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* Mobile — tighter spacing, CTA & text wrap altta */
@media (max-width: 480px) {
  .tm-demo-banner {
    padding: 8px 12px;
    gap: 8px;
    font-size: 12px;
  }
  .tm-demo-banner__text {
    flex: 1 1 100%;
    order: 3;
    min-width: 0;
  }
  .tm-demo-banner__cta {
    order: 4;
    margin-left: auto;
    padding: 6px 10px;
    font-size: 11.5px;
  }
  .tm-demo-banner__dismiss {
    order: 2;
    margin-left: auto;
  }
}

/* prefers-reduced-motion — disable all transitions/animations */
@media (prefers-reduced-motion: reduce) {
  .tm-demo-banner,
  .tm-demo-banner__cta,
  .tm-demo-banner__cta-icon,
  .tm-demo-banner__dismiss {
    animation: none !important;
    transition: none !important;
  }
}

/* Session dismiss — hide whole element.
   PR-A 2026-06-07: html.tm-demo-banner-dismissed selector eklendi —
   base.html <head>'de sessionStorage check ile sync set ediliyor.
   Bu ilk paint'te display:none uygular → entrance animation tetiklenmez
   → "görünüp sonra kapanma" flicker'ı engellenir. data-dismissed selector
   in-session dismiss button click path'ini karşılamak için korundu. */
html.tm-demo-banner-dismissed .tm-demo-banner,
.tm-demo-banner[data-dismissed="true"] {
  display: none !important;
}