/* ==========================================================================
   ETB Component Library
   --------------------------------------------------------------------------
   Hibrit editoryal + data tasarım dilinin bileşen kütüphanesi.
   Tüm partial'lar (views/partials/components/*) bu class'ları kullanır.
   Token'lar (etb-tokens.css) önce yüklenmeli — buradaki class'lar onları
   referans alır.
   --------------------------------------------------------------------------
   Naming: BEM. Block: .etb-section-head, Element: .etb-section-head__title,
   Modifier: .etb-section-head--center
   ========================================================================== */

/* ==========================================================================
   1. SECTION HEADER — eyebrow + serif başlık + altın çizgi + opsiyonel lede
   ==========================================================================
   Her bölüm aynı ritm ile açılır. İçerik sayfalarında, dergi makalelerinde,
   admin panellerinde — her yerde aynı yapı. Bu, kullanıcının sayfaları
   tarayışında oluşan ritmin kaynağıdır.
   ========================================================================== */
.etb-section-head {
  margin: 0 0 var(--etb-space-12);
  max-width: 720px;
}
.etb-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.etb-section-head--wide { max-width: 920px; }

.etb-section-head__eyebrow {
  display: inline-block;
  font-family: var(--etb-font-condensed);
  font-weight: 600;
  font-size: 0.8125rem;       /* 13px */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--etb-gold-700);
  margin: 0 0 var(--etb-space-3);
}
.etb-section-head__title {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 96;
  font-weight: 600;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--etb-navy-700);
  margin: 0 0 var(--etb-space-3);
}
.etb-section-head__rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--etb-gold-400);
  border-radius: 2px;
  margin: 0;
}
.etb-section-head--center .etb-section-head__rule {
  margin-left: auto;
  margin-right: auto;
}
.etb-section-head__lede {
  margin: var(--etb-space-5) 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--etb-fg-muted);
}
.etb-section-head--center .etb-section-head__lede {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   2. LIVE BADGE — canlı veri rozeti
   ==========================================================================
   Borsa verisinin "yaşadığını" gösteren imza primitive. Yeşil nabız nokta +
   "CANLI" etiketi + monospace timestamp. Kapalı durumda gri/sönmüş varyant.
   ========================================================================== */
.etb-live {
  display: inline-flex;
  align-items: center;
  gap: var(--etb-space-2);
  font-family: var(--etb-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--etb-green-500);
}
.etb-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--etb-green-500);
  box-shadow: 0 0 0 0 rgba(0, 117, 58, .55);
  animation: etb-live-pulse 1.8s var(--etb-ease-signature) infinite;
  flex-shrink: 0;
}
.etb-live__label { flex-shrink: 0; }
.etb-live__ts {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--etb-fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
.etb-live--closed { color: var(--etb-fg-muted); }
.etb-live--closed .etb-live__dot {
  background: var(--etb-fg-subtle);
  box-shadow: none;
  animation: none;
}
@keyframes etb-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 117, 58, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 117, 58, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(0, 117, 58, 0);   }
}

/* ==========================================================================
   3. BUTTON — primary / ghost / gold + shimmer
   ==========================================================================
   Üç ses tonu. Hover'da soldan sağa shimmer geçer. Tek easing eğrisi.
   ========================================================================== */
.etb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--etb-space-2);
  padding: 0.875rem 1.5rem;
  border-radius: var(--etb-radius-pill);
  font-family: var(--etb-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition:
    transform 0.25s var(--etb-ease-signature),
    background 0.2s var(--etb-ease-signature),
    color 0.2s var(--etb-ease-signature),
    box-shadow 0.25s var(--etb-ease-signature),
    border-color 0.25s var(--etb-ease-signature);
}
.etb-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--etb-ease-signature);
  pointer-events: none;
}
.etb-btn:hover::before { transform: translateX(120%); }

.etb-btn__icon,
.etb-btn__arrow { flex-shrink: 0; line-height: 0; }
.etb-btn__arrow { transition: transform 0.25s var(--etb-ease-signature); }
.etb-btn:hover .etb-btn__arrow { transform: translateX(3px); }

.etb-btn--primary {
  background: var(--etb-navy-500);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(26, 87, 138, .45);
}
.etb-btn--primary:hover {
  background: var(--etb-navy-700);
  color: #fff;
  box-shadow: 0 16px 40px -10px rgba(26, 87, 138, .6);
}

.etb-btn--ghost {
  background: rgba(255, 255, 255, .65);
  color: var(--etb-navy-700);
  border-color: var(--etb-ivory-300);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.etb-btn--ghost:hover {
  background: var(--etb-ivory-50);
  color: var(--etb-navy-900);
  box-shadow: 0 12px 30px -10px rgba(14, 18, 22, .18);
}

.etb-btn--gold {
  background: var(--etb-gold-400);
  color: var(--etb-navy-900);
  box-shadow: 0 8px 24px -8px rgba(62, 110, 140, .55);
}
.etb-btn--gold:hover {
  background: var(--etb-gold-500);
  box-shadow: 0 16px 40px -10px rgba(62, 110, 140, .7);
}

.etb-btn--lg { padding: 1.0625rem 1.875rem; font-size: 1rem; }
.etb-btn--sm { padding: 0.625rem 1.125rem; font-size: 0.8125rem; }

/* ==========================================================================
   4. CARD — generic feature card (haber, GI, ürün özet)
   ==========================================================================
   Hover'da 4px yukarı kalkar, gölge derinleşir, üst kenara altın çizgi belirir.
   Tüm kart-benzeri bileşenler bu temele kurulur.
   ========================================================================== */
.etb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--etb-bg-surface);
  border: 1px solid var(--etb-border-subtle);
  border-radius: var(--etb-radius-lg);
  padding: var(--etb-space-6);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 0.35s var(--etb-ease-signature),
    box-shadow 0.35s var(--etb-ease-signature),
    border-color 0.35s var(--etb-ease-signature);
}
.etb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--etb-gold-400);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--etb-ease-signature);
}
.etb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--etb-shadow-xl);
  border-color: var(--etb-gold-300);
}
.etb-card:hover::before { transform: scaleX(1); }

.etb-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--etb-radius-md);
  background: var(--etb-gold-50);
  color: var(--etb-gold-700);
  font-size: 1.25rem;
  margin: 0 0 var(--etb-space-4);
  flex-shrink: 0;
}
.etb-card__title {
  font-family: var(--etb-font-serif);
  font-variation-settings: "opsz" 48;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--etb-navy-700);
  margin: 0 0 var(--etb-space-2);
}
.etb-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--etb-fg-muted);
  margin: 0 0 var(--etb-space-4);
  flex-grow: 1;
}
.etb-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--etb-space-2);
  font-family: var(--etb-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--etb-navy-500);
  margin-top: auto;
}
.etb-card__cta-arrow { transition: transform 0.25s var(--etb-ease-signature); }
.etb-card:hover .etb-card__cta { color: var(--etb-navy-700); }
.etb-card:hover .etb-card__cta-arrow { transform: translateX(3px); }

/* ==========================================================================
   5. PRICE — data mode tablo
   ==========================================================================
   Fiyat tablosu. Rakamlar mono, tabular-nums. Row hover'da soldan altın
   çizgi belirir. Delta hücreleri sadece renkli.
   ========================================================================== */
.etb-price {
  background: var(--etb-bg-data-card);
  border: 1px solid var(--etb-border-subtle);
  border-radius: var(--etb-radius-lg);
  overflow: hidden;
}
.etb-price__head {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--etb-space-4);
  padding: var(--etb-space-4) var(--etb-space-5);
  background: var(--etb-navy-700);
  color: #fff;
  font-family: var(--etb-font-condensed);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.etb-price__head--right { text-align: right; }

.etb-price__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--etb-space-4);
  padding: var(--etb-space-4) var(--etb-space-5);
  border-bottom: 1px solid var(--etb-border-subtle);
  transition: background 0.2s var(--etb-ease-signature);
}
.etb-price__row:last-child { border-bottom: none; }
.etb-price__row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--etb-gold-400);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s var(--etb-ease-signature);
}
.etb-price__row:hover { background: var(--etb-bg-subtle); }
.etb-price__row:hover::before { transform: scaleY(1); }

.etb-price__name {
  font-family: var(--etb-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--etb-fg-default);
}
.etb-price__unit {
  font-family: var(--etb-font-body);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--etb-fg-subtle);
  margin-left: var(--etb-space-2);
}
.etb-price__value,
.etb-price__high,
.etb-price__low {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--etb-navy-900);
  text-align: right;
  min-width: 84px;
}
.etb-price__delta {
  font-family: var(--etb-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--etb-radius-sm);
  min-width: 76px;
  text-align: center;
}
.etb-price__delta--up   { color: var(--etb-price-up);   background: var(--etb-success-bg); }
.etb-price__delta--down { color: var(--etb-price-down); background: var(--etb-danger-bg); }
.etb-price__delta--flat { color: var(--etb-price-flat); background: var(--etb-neutral-150); }

/* Mobile: yüksek/düşük sütunlarını gizle */
@media (max-width: 720px) {
  .etb-price__head { grid-template-columns: 1fr auto auto; }
  .etb-price__row  { grid-template-columns: 1fr auto auto; }
  .etb-price__head--high,
  .etb-price__head--low,
  .etb-price__high,
  .etb-price__low { display: none; }
}

/* ==========================================================================
   6. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .etb-live__dot { animation: none; }
  .etb-btn::before { display: none; }
  .etb-card,
  .etb-card::before,
  .etb-price__row::before { transition: none; }
  .etb-card:hover { transform: none; }
}