/* Veri ve şirket raporları, tasarım v2 (23.09, kurucu 25263 "dağınık, masaüstünde dar"; 25278 rol raporları da taşındı).
   site.css'ten SONRA yüklenir; sahne (.stage), afiş başlık (.poster) ve düğmeler oradan gelir.
   Düzen: cevap sahnede büyük karar kartında; veriler aynı dilde kartlarda (masaüstünde üç sütun, telefonda tek).
   Çubuk genişlikleri sınıfla verilir (satır içi stil CSP'ye takılır). Hareket yok. */

.sr { padding-bottom: var(--space-16); }

/* ---------------------------------------------------------------- sahne başlık */

.sr-hero { padding: var(--space-10) 0 var(--space-10); }

.sr-hero-in { position: relative; display: grid; gap: var(--space-8); align-items: center; }

.sr-hero .eyebrow a { color: inherit; text-decoration: none; }

.sr-baslik { margin: var(--space-4) 0 var(--space-5); font-size: clamp(2.5rem, 10vw, 5.25rem); }

.sr-baslik > span { white-space: normal; overflow-wrap: anywhere; }

.sr-giris { max-width: 34rem; margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--stage-text-soft); }

.sr-karar {
  padding: var(--space-6);
  border: 1px solid var(--stage-line);
  border-radius: 28px;
  background: var(--stage-panel);
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
}

.sr-karar-etiket, .sr-kart-etiket {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sr-karar-etiket { color: var(--stage-text-soft); }

.sr-karar-sayi {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--font-poster);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 7.5rem);
  line-height: 0.9;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

/* Bölme çubuğu: kırmızı = eleyici şart var, açık = görülmedi. */
.sr-bolme { display: flex; height: 14px; margin: 0; border-radius: 7px; overflow: hidden; background: rgb(255 255 255 / 12%); }

.sr-bolme i { display: block; height: 100%; }

.sr-bolme-var { background: var(--stage-no); }

.sr-bolme-yok { flex: 1 1 auto; background: var(--lime); }

.sr-karar-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; }

.sr-karar-dl div { display: grid; gap: 2px; }

.sr-karar-dl dt { display: flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; color: var(--stage-text-soft); }

.sr-karar-dl dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.sr-nokta { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.sr-nokta-var { background: var(--stage-no); }

.sr-nokta-yok { background: var(--lime); }

.sr-karar-alt { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--stage-line); font-size: 0.875rem; color: var(--stage-text-dim); }

/* ---------------------------------------------------------------- kart panosu */

.sr-pano {
  display: grid;
  gap: var(--space-4);
  margin-top: calc(-1 * var(--space-6));
  position: relative;
  grid-auto-flow: row dense;
}

.sr-kart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6);
  border: 1.5px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 0 1px 0 var(--color-border), 0 12px 32px rgb(16 35 26 / 6%);
}

.sr-kart-etiket { color: var(--color-brand); }

.sr-kart h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; }

.sr-kart-not { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-soft); }

.sr-kart > .sr-kart-not:last-child { margin-top: auto; }

.sr-uyari { margin: auto 0 0; padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--color-surface-soft); font-size: 0.875rem; line-height: 1.5; color: var(--color-ink-soft); }

.sr-bos { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }

/* Yatay çubuklar */
.sr-cubuk { display: grid; gap: var(--space-3); margin: var(--space-1) 0 0; padding: 0; list-style: none; }

.sr-cubuk li { display: grid; grid-template-columns: minmax(0, 1fr) 3.25rem; grid-template-areas: "ad deger" "yol yol"; gap: 6px var(--space-3); align-items: end; }

.sr-cubuk-ad { grid-area: ad; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }

.sr-cubuk-deger { grid-area: deger; font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }

.sr-cubuk-yol { grid-area: yol; display: block; height: 10px; border-radius: 5px; background: var(--color-border); overflow: hidden; }

.sr-cubuk-yol i { display: block; height: 100%; border-radius: 5px; background: var(--color-brand); }

/* Büyük sayılar */
.sr-buyuk { display: grid; gap: var(--space-4); margin: var(--space-1) 0 0; }

.sr-buyuk div { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }

.sr-buyuk div:last-child { border-bottom: 0; padding-bottom: 0; }

.sr-buyuk dt { order: 2; font-size: 0.9375rem; line-height: 1.4; color: var(--color-ink-soft); }

.sr-buyuk dd { order: 1; display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-family: var(--font-poster); font-weight: 800; font-size: 2.75rem; line-height: 1; font-variant-numeric: tabular-nums; }

.sr-buyuk small { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; color: var(--color-ink-soft); }

/* Beceri çipleri */
.sr-cipler { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }

.sr-cipler li { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: 999px; font-weight: 700; }

.sr-cipler strong { display: inline-grid; place-items: center; min-width: 3rem; height: 30px; padding: 0 var(--space-2); border-radius: 999px; background: var(--color-sprout-soft); color: var(--color-brand); font-family: var(--font-display); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- alt bölüm */

.sr-alt { display: grid; gap: var(--space-5); margin-top: var(--space-8); align-items: start; }

.sr-alt-sol { display: grid; gap: var(--space-5); min-width: 0; }

.sr-diger h2 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }

.sr-diger ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.sr-diger a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-ink); font-weight: 700; text-decoration: none; }

.sr-diger a:hover { border-color: var(--color-brand); color: var(--color-brand); }

.sr-diger .sr-tumu { border-color: var(--color-ink); }

.sr-yontem { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.sr-yontem summary { display: flex; align-items: center; min-height: 56px; font-family: var(--font-display); font-weight: 800; cursor: pointer; }

.sr-yontem ul { margin: 0 0 var(--space-4); padding-left: 1.2rem; font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-soft); }

.sr-yontem li + li { margin-top: var(--space-2); }

.sr-yontem a, .sr-dipnot a { color: var(--color-brand); font-weight: 700; }

.sr-cta { padding: var(--space-6); border-radius: 28px; background: var(--stage); color: var(--stage-text); }

.sr-cta h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; }

.sr-cta p { margin: 0 0 var(--space-5); color: var(--stage-text-soft); line-height: 1.55; }

.sr-cta-dugmeler { display: grid; gap: var(--space-3); }

.sr-dugme { min-height: 56px; padding: 0 var(--space-6); font-size: 1.0625rem; }

/* ---------------------------------------------------------------- dizin */

.sr-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--stage-line); border-radius: 22px; background: var(--stage-panel); overflow: hidden; }

.sr-ozet div { display: flex; flex-direction: column-reverse; gap: 4px; padding: var(--space-4); }

.sr-ozet div + div { border-left: 1px solid var(--stage-line); }

.sr-ozet dt { font-size: 0.875rem; color: var(--stage-text-soft); }

.sr-ozet dd { margin: 0; font-family: var(--font-poster); font-weight: 800; font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1; color: var(--lime); font-variant-numeric: tabular-nums; }

.sr-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); margin: var(--space-8) 0 var(--space-5); padding: 0; list-style: none; }

.sr-izgara a { display: grid; gap: var(--space-2); height: 100%; padding: var(--space-5); border: 1.5px solid var(--color-border); border-radius: 20px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; }

.sr-izgara a:hover { border-color: var(--color-brand); }

.sr-izgara strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }

.sr-izgara-sayi { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-poster); font-weight: 800; font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }

.sr-izgara-sayi small { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--color-ink-soft); }

.sr-bolme-ince { height: 8px; background: var(--color-border); }

.sr-izgara .sr-bolme-yok { background: var(--color-brand); }

.sr-izgara .sr-bolme-var { background: var(--red); }

.sr-izgara-alt { font-size: 0.875rem; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }

.sr-dipnot { max-width: 48rem; color: var(--color-ink-soft); font-size: 0.9375rem; line-height: 1.55; }

.sr-izgara-tur { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }

.sr-izgara-ozel a { border-color: var(--stage); background: var(--stage); color: var(--stage-text); }

.sr-izgara-ozel .sr-izgara-tur { color: var(--lime); }

.sr-izgara-ozel .sr-izgara-sayi { color: var(--lime); }

.sr-izgara-ozel .sr-izgara-sayi small, .sr-izgara-ozel .sr-izgara-alt { color: var(--stage-text-soft); }

.sr-cubuk-ad a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em; }

.sr-cubuk-ad a:hover { color: var(--color-brand); text-decoration-color: currentColor; }

.sr-kart-not a { color: var(--color-brand); font-weight: 700; }

/* ---------------------------------------------------------------- genişlik sınıfları (5'lik basamak) */

.sr .w0 { width: 0; }
.sr .w5 { width: 5%; }
.sr .w10 { width: 10%; }
.sr .w15 { width: 15%; }
.sr .w20 { width: 20%; }
.sr .w25 { width: 25%; }
.sr .w30 { width: 30%; }
.sr .w35 { width: 35%; }
.sr .w40 { width: 40%; }
.sr .w45 { width: 45%; }
.sr .w50 { width: 50%; }
.sr .w55 { width: 55%; }
.sr .w60 { width: 60%; }
.sr .w65 { width: 65%; }
.sr .w70 { width: 70%; }
.sr .w75 { width: 75%; }
.sr .w80 { width: 80%; }
.sr .w85 { width: 85%; }
.sr .w90 { width: 90%; }
.sr .w95 { width: 95%; }
.sr .w100 { width: 100%; }

/* ---------------------------------------------------------------- geniş ekran */

@media (min-width: 48rem) {
  .sr-pano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-genis, .sr-tam { grid-column: 1 / -1; }
  .sr-cta-dugmeler { display: flex; flex-wrap: wrap; }
}

@media (min-width: 64rem) {
  .sr-hero { padding: var(--space-16) 0 var(--space-16); }
  .sr-hero-in { grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 1fr); gap: var(--space-12); }
  .sr-hero-liste .sr-hero-in { grid-template-columns: minmax(0, 1.5fr) minmax(22rem, 1fr); }
  .sr-pano { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(-1 * var(--space-8)); }
  .sr-genis { grid-column: span 2; }
  .sr-tam { grid-column: 1 / -1; }
  /* Rol raporu: şirket listesi iki satır boyunca; yanında sözleşme ve kıdem üst üste (boş sütun kalmaz). */
  .sr-uzun { grid-row: span 2; }
  .sr-alt { grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr); gap: var(--space-8); }
}