/* =====================================================================
   CSPULSE — GUVEN SPEKTRUMU
   Sitenin imza bileseni. Skoru bir olcum aletinin okumasi gibi gosterir:
   48 segmentli bir bant, uzerinde kayan bir igne ve altinda kanal kanal
   faktor katkilari.
   ===================================================================== */

.spectrum {
  display: grid;
  gap: var(--s-3);
}

/* ---- Ust satir: skor + kademe ------------------------------------- */
.spectrum__readout {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
}

.spectrum__score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-5xl);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--verdict-color, var(--ink));
}

.spectrum__max {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--ink-3);
  align-self: flex-end;
  margin-left: -6px;
}

.spectrum__verdict {
  display: grid;
  gap: 2px;
  padding-bottom: var(--s-1);
}

.spectrum__tier {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--verdict-color, var(--ink));
  line-height: 1;
}

/* ---- Segmentli bant ------------------------------------------------ */
.spectrum__band {
  position: relative;
  padding-top: var(--s-4);
}

.spectrum__segments {
  display: flex;
  gap: 2px;
  height: 28px;
  align-items: flex-end;
}

.spectrum__seg {
  flex: 1 1 0;
  height: 60%;
  border-radius: 1px;
  background: var(--surface-3);
  transition: height var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Doldurulmus segmentler renk spektrumunu takip eder */
.spectrum__seg.is-on { height: 100%; }

/* Igne (skorun tam yeri) */
.spectrum__needle {
  position: absolute;
  top: 0;
  bottom: -6px;
  width: 2px;
  background: var(--ink);
  border-radius: 1px;
  transform: translateX(-1px);
  box-shadow: 0 0 0 3px var(--bg);
}

.spectrum__needle::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 7px; height: 7px;
  background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

/* Olcek */
.spectrum__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .1em;
  color: var(--ink-3);
}

/* ---- Kucuk hali (listeler, tablolar) ------------------------------- */
.spectrum--mini { gap: var(--s-1); }
.spectrum--mini .spectrum__segments { height: 8px; gap: 1.5px; }
.spectrum--mini .spectrum__seg { height: 100%; border-radius: .5px; }
.spectrum--mini .spectrum__band { padding-top: 0; }

.spectrum-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.spectrum-inline__score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--verdict-color, var(--ink));
  min-width: 24px;
  text-align: right;
}

.spectrum-inline__bar {
  width: 64px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  position: relative;
}

.spectrum-inline__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--verdict-color, var(--signal));
}

/* =====================================================================
   FAKTOR KANALLARI
   Bir mikser kanali gibi: etiket | deger | cubuk | agirlik
   ===================================================================== */

.channels { display: grid; gap: var(--s-1); }

.channel {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 62px minmax(80px, 2fr) 44px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease);
}
.channel:hover { background: var(--surface-2); }

.channel__name {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink);
  text-align: right;
}

.channel__track {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.channel__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--channel-color, var(--signal));
  transition: width var(--dur-slow) var(--ease);
}

/* Veri yoksa cizgili desen — "olculemedi" demek */
.channel--nodata .channel__fill {
  background: repeating-linear-gradient(
    135deg,
    var(--surface-3) 0 4px,
    var(--line) 4px 8px
  );
}
.channel--nodata .channel__name,
.channel--nodata .channel__value { color: var(--ink-3); }

.channel__weight {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--ink-3);
  text-align: right;
  letter-spacing: .06em;
}

.channel__note {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  padding-top: 2px;
}

@media (max-width: 620px) {
  .channel {
    grid-template-columns: 1fr 62px;
    row-gap: var(--s-2);
  }
  .channel__track  { grid-column: 1 / -1; }
  .channel__weight { display: none; }
}

/* ---- Tavan uyarisi -------------------------------------------------- */
.cap-notice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: var(--danger-wash);
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.cap-notice strong { color: var(--danger); }

/* ---- Guven araligi gostergesi --------------------------------------- */
.confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.confidence__pips { display: flex; gap: 2px; }

.confidence__pip {
  width: 12px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
}
.confidence__pip.is-on { background: var(--ink-2); }