/* Bileşenler: bölünmüş ekran, kartlar, huni, hizmet sembolleri, şemalar, çıktı figürleri. */

/* --- Bölünmüş ekran (7/5): iddia + kanıt ----------------------------------------- */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.split--end {
  align-items: flex-end;
  gap: 40px 48px;
}

.split--start {
  align-items: flex-start;
}

.split__main {
  flex: 7 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.split__side {
  flex: 5 1 340px;
  min-width: 0;
}

.hero {
  padding-top: clamp(48px, 8vw, 104px);
}

.hero--inner {
  padding-top: clamp(40px, 7vw, 88px);
}

/* Kart (12–16 köşe, gölgesiz) */
.card {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  padding: 24px;
}

.card--soft {
  border-color: transparent;
  background: var(--color-paper-2);
}

.card--coral {
  border-color: var(--color-accent-rule);
  background: var(--color-accent-wash);
}

/* Hero kanıt kartı: tek izinli gölge, düz ofset mercan yumuşak */
.proof-card {
  position: relative;
  padding: 28px 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border: var(--rule-hair) solid var(--color-rule);
  box-shadow: 12px 12px 0 var(--color-accent-soft);
}

.proof-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  font-weight: 600;
}

.proof-figure {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.proof-figure figcaption {
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  padding-left: 4px;
}

/* Ölçüm hunisi: 4 ortalanmış, daralan bant. Rakam yok. */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.funnel li {
  display: flex;
  justify-content: center;
}

.funnel__bar {
  min-height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  overflow: hidden;
}

.funnel__name {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.funnel__note {
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.85;
}

.funnel li:nth-child(1) .funnel__bar {
  width: 100%;
  background: oklch(92% 0.006 70);
  color: var(--color-ink-2);
}

.funnel li:nth-child(2) .funnel__bar {
  width: 84%;
  background: var(--color-accent-light);
  color: oklch(20% 0.03 40);
}

.funnel li:nth-child(3) .funnel__bar {
  width: 66%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.funnel li:nth-child(4) .funnel__bar {
  width: 48%;
  background: var(--color-ink);
  color: var(--color-on-ink);
}

/* --- İlke bandı panelleri ---------------------------------------------------------- */
.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.ledger__panel {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-band-rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ledger__panel .kicker {
  color: var(--color-ink-band-2);
}

.ledger__panel--accent {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ledger__panel--accent .kicker {
  color: var(--color-on-accent);
  font-weight: 700;
}

/* --- Hizmet kartı ve nokta dili sembolleri ---------------------------------------- */
.grid {
  display: grid;
  gap: 12px;
}

.grid--320 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--280 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--260 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid--250 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid--240 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.grid--180 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.service-card {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.service-card:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.service-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.service-card__desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.service-card__meta {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: oklch(40% 0.012 50);
}

.service-card__meta span:last-child {
  color: var(--color-accent-ink);
  font-weight: 600;
}

.symbol-tile {
  flex: 0 0 96px;
  height: 96px;
  border-radius: 12px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol-tile--coral {
  background: var(--color-accent-soft);
}

/* Yönetici markası: tek mürekkep daire, mercan halka */
.sym-ym {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-ink);
  box-shadow:
    0 0 0 7px var(--color-accent-soft),
    0 0 0 9px var(--color-accent);
}

/* Growth Engine: nokta + yükselen 3 çubuk */
.sym-ge {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
}

.sym-ge i {
  width: 9px;
  border-radius: 2px;
  background: var(--color-gray-dot);
}

.sym-ge i:nth-child(1) {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-ink);
  align-self: center;
}

.sym-ge i:nth-child(2) {
  height: 16px;
}

.sym-ge i:nth-child(3) {
  height: 30px;
}

.sym-ge i:nth-child(4) {
  height: 46px;
  background: var(--color-accent);
}

/* B2B creator: üst üste binen 3 daire */
.sym-ck {
  display: flex;
}

.sym-ck i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--color-surface-2);
  background: var(--color-gray-dot);
}

.sym-ck i + i {
  margin-left: -12px;
}

.sym-ck i:nth-child(2) {
  background: var(--color-accent);
}

.sym-ck i:nth-child(3) {
  background: var(--color-ink);
}

/* Çalışan programı: 4×3 nokta ızgarası */
.sym-cp {
  display: grid;
  grid-template-columns: repeat(4, 11px);
  gap: 7px;
}

.sym-cp i {
  height: 11px;
  border-radius: 50%;
  background: var(--color-ink);
}

.sym-cp i:nth-child(1),
.sym-cp i:nth-child(3),
.sym-cp i:nth-child(6),
.sym-cp i:nth-child(8),
.sym-cp i:nth-child(9),
.sym-cp i:nth-child(11) {
  background: var(--color-accent);
}

.sym-ge i,
.sym-ck i,
.sym-cp i {
  display: block;
}

/* --- İlk beş hafta şeması ----------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: var(--text-xs);
  color: oklch(40% 0.012 50);
  list-style: none;
  padding: 0;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-ink);
}

.legend__swatch--accent {
  background: var(--color-accent);
}

.legend__swatch--round {
  border-radius: 50%;
}

.weeks-scroll {
  overflow-x: auto;
}

.weeks {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  list-style: none;
  padding: 0;
}

.weeks li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weeks__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--color-accent-ink);
}

.weeks__title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.weeks__team {
  margin-top: 6px;
  border-radius: 8px;
  background: var(--color-ink);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  font-size: var(--text-2xs);
  line-height: 1.3;
  color: oklch(96% 0.004 70);
}

.weeks__you {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  font-size: var(--text-2xs);
  line-height: 1.2;
  color: oklch(32% 0.012 50);
}

.weeks__you::before {
  content: '';
  flex: 0 0 16px;
  height: 100%;
  border-radius: 6px;
  background: var(--color-accent);
}

/* --- Örnek çıktı figürleri ------------------------------------------------------------ */
.output {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.output__frame {
  height: 220px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hizmet sayfasında çerçeveli varyant */
.output--boxed .output__frame {
  height: auto;
  min-height: 240px;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

.output figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.output figcaption strong {
  font-weight: 600;
}

.output figcaption span,
.output--boxed figcaption {
  font-size: 0.875rem;
  color: var(--color-ink-3);
}

.output__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-ink-3);
}

.bars {
  flex: 1;
  min-height: 110px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: var(--rule-hair) solid oklch(82% 0.01 70);
  list-style: none;
  padding: 0;
}

.bars li {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: oklch(82% 0.01 70);
}

.bars li.is-accent {
  background: var(--color-accent);
}

.sliders {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  list-style: none;
  padding: 0;
}

.output--boxed .sliders {
  flex: 0 0 auto;
  gap: 14px;
}

.slider {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider__ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: oklch(40% 0.012 50);
}

.slider__track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-rule);
}

.slider__track::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--color-ink);
  border: 3px solid var(--color-surface-2);
}

.output--boxed .slider__track::after {
  border-color: var(--color-card);
}

.calendar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  list-style: none;
  padding: 0;
}

.calendar__days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-ink-3);
  text-align: center;
}

.calendar li {
  border-radius: 5px;
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.output--boxed .calendar li {
  background: oklch(96% 0.006 70);
}

.calendar li::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.calendar li[data-c='a']::after {
  background: var(--color-accent);
}

.calendar li[data-c='i']::after {
  background: var(--color-ink);
}

.calendar li[data-c='g']::after {
  background: var(--color-gray-dot);
}

.dot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.6875rem;
  color: oklch(40% 0.012 50);
  list-style: none;
  padding: 0;
}

.dot-legend li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dot-legend li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}

/* --- Kurucu kanıtı ---------------------------------------------------------------- */
.founder {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-accent-wash);
  border: var(--rule-hair) solid var(--color-accent-rule);
}

.founder__portrait {
  flex: 1 1 260px;
  min-height: 280px;
  background: oklch(88% 0.04 40);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-size: var(--text-2xs);
  color: oklch(34% 0.03 40);
}

.founder__body {
  flex: 2 1 360px;
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}

.founder__rank {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.founder__num {
  font-size: clamp(4.5rem, 2rem + 8vw, 7.5rem);
  line-height: 0.8;
  font-weight: 600;
  letter-spacing: -0.06em;
}

.founder__list {
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 500;
  padding-bottom: 6px;
}

.founder__quote {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.founder .btn {
  align-self: flex-start;
}


/* Örnek format ölçüleri (CSP: satır içi stil yok) */
.bars li:nth-child(1) { height: 22%; }
.bars li:nth-child(2) { height: 28%; }
.bars li:nth-child(3) { height: 26%; }
.bars li:nth-child(4) { height: 44%; }
.bars li:nth-child(5) { height: 54%; }
.bars li:nth-child(6) { height: 48%; }
.bars li:nth-child(7) { height: 74%; }
.bars li:nth-child(8) { height: 92%; }

.slider:nth-child(1) .slider__track::after { left: 68%; }
.slider:nth-child(2) .slider__track::after { left: 82%; }
.slider:nth-child(3) .slider__track::after { left: 55%; }

.weeks li:nth-child(1) .weeks__team { height: 120px; }
.weeks li:nth-child(2) .weeks__team { height: 96px; }
.weeks li:nth-child(3) .weeks__team { height: 84px; }
.weeks li:nth-child(4) .weeks__team { height: 140px; }
.weeks li:nth-child(5) .weeks__team { height: 108px; }

.weeks li:nth-child(1) .weeks__you::before { flex-basis: 24px; }
.weeks li:nth-child(2) .weeks__you::before { flex-basis: 16px; }
.weeks li:nth-child(3) .weeks__you::before { flex-basis: 12px; }
.weeks li:nth-child(4) .weeks__you::before { flex-basis: 14px; }
.weeks li:nth-child(5) .weeks__you::before { flex-basis: 18px; }

.chip--strike {
  border: var(--rule-hair) dashed oklch(75% 0.01 70);
  color: var(--color-ink-3);
  text-decoration: line-through;
  font-weight: 500;
}

.dot-legend .is-a { --dot: var(--color-accent); }
.dot-legend .is-i { --dot: var(--color-ink); }
.dot-legend .is-g { --dot: var(--color-gray-dot); }

/* Dört kart her zaman 2×2 (ya da tek sütun): üçüncü sütun açılıp tek kart yetim kalmasın. */
.grid--2up {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, (100% - 12px) / 2)), 1fr));
}

/* Altı kart en fazla üç sütun: 3×2 ya da 2×3, yetim kart yok. */
.grid--3up {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(250px, (100% - 24px) / 3)), 1fr));
}