/* ═══════════════════════════════════════════════════════════
   Hero — slider, başlık fontu, kayan şerit
   ═══════════════════════════════════════════════════════════ */

/* Başlık tema fontunu kullanır; ayrı bir aile yüklenmez */

/* ── Öğe boyutları ──────────────────────────────────
   Değerler editörden --m-<öğe>-<özellik> olarak gelir;
   ayarlanmayanlar buradaki varsayılanda kalır. */

.hero-title {
  font-family: var(--font-heading, inherit);
  font-size:      var(--m-title-size, 28px);
  font-weight:    var(--m-title-weight, 800);
  line-height:    var(--m-title-line, 1.15);
  letter-spacing: var(--m-title-spacing, 0);
  text-transform: var(--m-title-transform, none);
  text-align:     var(--m-title-align, center);
  font-style: italic;
  margin: 0;
}

@media (min-width: 768px) {
  .hero-title { font-size: var(--m-title-size-md, var(--m-title-size, 48px)); }
}

.hero-subtitle {
  font-size:   var(--m-subtitle-size, 14px);
  font-weight: var(--m-subtitle-weight, 400);
  line-height: var(--m-subtitle-line, 1.6);
  text-align:  var(--m-subtitle-align, center);
  margin: 0;
}

@media (min-width: 768px) {
  .hero-subtitle { font-size: var(--m-subtitle-size, 16px); }
}

.hero-btn {
  font-size:      var(--m-button-size, 13px);
  font-weight:    var(--m-button-weight, 500);
  border-radius:  var(--m-button-radius, 0);
  padding:        var(--m-button-padding-y, 10px) var(--m-button-padding-x, 24px);
  text-transform: var(--m-button-transform, none);
}

@media (min-width: 768px) {
  .hero-btn {
    font-size: var(--m-button-size, 14px);
    padding:   var(--m-button-padding-y, 12px) var(--m-button-padding-x, 32px);
  }
}

.marquee-brand {
  font-family: var(--font-heading, inherit);
  font-size:   var(--m-marquee-size, 18px);
  letter-spacing: var(--m-marquee-spacing, 0);
}

.marquee-text {
  font-size:      var(--m-marquee-size, 13px);
  letter-spacing: var(--m-marquee-spacing, 0);
}

/* ── Slide görünürlüğü ─────────────────────────────── */
/* Orijinaldeki mantık: yalnızca .active görünür.
   Opaklık geçişi yerine display kullanılıyor ki yüksekliği
   görselin oranı belirlesin — üst üste binen slide'lar
   konteynırı bozmasın. */

.hero-slide {
  display: none;
}

.hero-slide.active {
  display: block;
}

/* ── Noktalar ──────────────────────────────────────── */

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s, width .2s;
}

.hero-dot.active {
  background: #fff;
  width: 26px;
  border-radius: 5px;
}

/* ── Buton ─────────────────────────────────────────── */

.hero-btn:hover {
  opacity: .85;
}

/* ── Kayan şerit ───────────────────────────────────── */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-dot { transition: none; }
}