/* OtoSOR marka dili: "SOR halkaları" motifi (logodaki kırık halkalar),
   sayfa başlığı vurgusu, boş durum ve marka spinner'ı.
   Kural: veri alanlarında kırmızı yalnız durum içindir; buradaki kırmızı
   KABUK/BAŞLIK düzeyinde marka aksanıdır (başlık çizgisi, aktif menü). */

/* ── Sayfa başlığı: display font + kırmızı "SOR" çizgisi ── */
.os-pagetitle {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: var(--weight-bold);
  letter-spacing: -0.01em; line-height: var(--leading-tight);
  color: var(--text-primary);
}
.os-pagetitle--tick::after {
  content: ""; display: block;
  width: 28px; height: 4px; border-radius: var(--radius-pill);
  background: var(--brand-accent);
  margin-top: var(--space-2);
}
/* Başlığın kendisi marka mavisinde — detay ekranlarında varsayılan.
   Durum renkleriyle (kırmızı/sarı) başlık boyanmaz; durum badge'in işidir. */
.os-pagetitle--brand { color: var(--text-brand); }

/* ── SOR halkaları (dekoratif motif, düşük kontrast) ── */
.os-rings {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke-linecap='round' transform='rotate(35 36 36)'%3E%3Ccircle cx='36' cy='36' r='22' stroke='%23005282' stroke-opacity='.30' stroke-width='4' stroke-dasharray='117 22'/%3E%3Ccircle cx='36' cy='36' r='29' stroke='%230076A1' stroke-opacity='.22' stroke-width='4' stroke-dasharray='155 28' stroke-dashoffset='91'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--text-muted);
}
/* İkon kabın TAM ortasında: line-height:0 taban çizgisi kaymasını siler,
   display:block inline boşluğunu kaldırır, aspect-ratio kareliği garanti eder. */
.os-rings { line-height: 0; }
.os-rings svg { width: 22px; height: 22px; display: block; aspect-ratio: 1; }

/* ── Boş durum ── */
.os-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
}
.os-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--text-primary); margin-top: var(--space-2);
}
.os-empty__desc { font-size: var(--text-sm); color: var(--text-secondary); max-width: 360px; }
/* Boş durum tablo satırında (td colspan) da sarar: os-table--nowrap/--fixed hücresinin nowrap'ını devralınca
   açıklama 360px kutudan 256px taşıyordu (kapama listeleri, 2026-10-26). */
.os-empty, .os-empty__title, .os-empty__desc { white-space: normal; }
.os-empty__action { margin-top: var(--space-3); }

/* ── Marka spinner: iki kırık halka, zıt yönde döner ── */
.os-spinner { position: relative; width: 32px; height: 32px; flex: none; }
.os-spinner::before, .os-spinner::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 3px solid transparent;
}
.os-spinner::before {
  inset: 0;
  border-color: var(--cyan-500) transparent var(--cyan-500) var(--cyan-500);
  animation: os-spin 1s linear infinite;
}
.os-spinner::after {
  inset: 6px;
  border-color: var(--blue-500) transparent var(--blue-500) var(--blue-500);
  animation: os-spin 0.8s linear infinite reverse;
}
/* Hız varyantları — karşılaştırma için (kütüphanede yan yana çizili).
   --slow: uzun süren işler (rapor üretimi, toplu içe aktarma). Hızlı
   dönen halka uzun beklemede yorucu; yavaş dönüş "çalışıyor ama zaman
   alacak" der. --fast: 1sn'den kısa sürmesi beklenen işler. */
.os-spinner--slow::before { animation-duration: 1.6s; }
.os-spinner--slow::after  { animation-duration: 1.3s; }
.os-spinner--fast::before { animation-duration: 0.6s; }
.os-spinner--fast::after  { animation-duration: 0.5s; }
.os-spinner--sm { width: 20px; height: 20px; }
.os-spinner--sm::before { border-width: 2px; }
.os-spinner--sm::after { inset: 4px; border-width: 2px; }
@media (prefers-reduced-motion: no-preference) { /* keyframes always defined; motion is inherent to spinner */ }
@keyframes os-spin { to { transform: rotate(360deg); } }

/* ── Login / marka paneli: koyu mavi zemin + büyük halka filigranı ── */
.os-brandpanel {
  position: relative; overflow: hidden;
  background: var(--blue-700); color: var(--text-inverse);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-linecap='round' transform='rotate(35 36 36)'%3E%3Ccircle cx='36' cy='36' r='22' stroke-width='4' stroke-opacity='.08' stroke-dasharray='117 22'/%3E%3Ccircle cx='36' cy='36' r='29' stroke-width='4' stroke-opacity='.06' stroke-dasharray='155 28' stroke-dashoffset='91'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -120px bottom -140px;
  background-size: 420px;
}