/* ==========================================================================
   Componentler: buton, bölüm başlığı, kicker, badge, kart
   ========================================================================== */

/* --- Buton (pill) --- */
.sb-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	height: 2.75rem;
	border-radius: var(--sb-radius-pill);
	font-family: var(--sb-font-main);
	font-size: var(--sb-fs-btn);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* hidden özniteliği .sb-btn'in display'ini yenemez (yazar stili UA stilini
   ezer); adım adım düzende gizlenen Geri/İleri bu yüzden görünüyordu. */
.sb-btn[hidden] {
	display: none;
}

.sb-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow-btn);
}

.sb-btn--primary {
	background: var(--sb-primary);
	color: var(--sb-surface);
}

.sb-btn--orange {
	background: var(--sb-orange);
	color: var(--sb-surface);
}

.sb-btn--light {
	background: var(--sb-surface);
	color: var(--sb-ink);
	box-shadow: var(--sb-shadow-btn);
}

.sb-btn--accent-primary {
	color: var(--sb-primary);
}

/* Ton butonları (seminer kartları): rengin açık hali */
.sb-btn--tone.sb-btn--accent-orange { background: color-mix(in srgb, var(--sb-orange) 55%, var(--sb-surface)); color: var(--sb-surface); }
.sb-btn--tone.sb-btn--accent-blue   { background: color-mix(in srgb, var(--sb-blue) 55%, var(--sb-surface));   color: var(--sb-surface); }
.sb-btn--tone.sb-btn--accent-pink   { background: color-mix(in srgb, var(--sb-primary) 55%, var(--sb-surface)); color: var(--sb-surface); }

/* Kısa etiket varsayılan olarak gizli; dar ekranda CSS ile devreye girer.
   display:none olduğu için erişilebilirlik ağacında da yalnız biri bulunur. */
.sb-btn__label--short {
	display: none;
}

.sb-btn__chevron {
	font-size: 1.35em;
	line-height: 1;
	font-weight: 500;
}

.sb-btn__circle {
	display: inline-grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	margin-right: -0.75rem;
	border-radius: 50%;
	background: var(--sb-primary);
	color: var(--sb-surface);
	font-size: 0.9rem;
}

/* --orange varyantı yalnız ok'suz kullanılıyor (header), o yüzden listede yok. */
.sb-btn--tone .sb-btn__circle,
.sb-btn--primary .sb-btn__circle {
	background: color-mix(in srgb, var(--sb-surface) 35%, transparent);
}

/* --- Bölüm başlığı --- */
.sb-section-title {
	font-size: var(--sb-fs-section);
	font-weight: 600;
	letter-spacing: 0.38em;
	text-indent: 0.38em; /* ortalamada harf aralığı payı */
	text-align: center;
	text-transform: uppercase;
}

/* Varsayılan ton — rengi burada, tabanda değil; iki ton simetrik kalsın. */
.sb-section-title--gray {
	color: var(--sb-gray-700);
}

.sb-section-title--pink {
	color: var(--sb-primary);
	letter-spacing: 0.44em;
}

/* --- Üst etiket (kicker) --- */
.sb-kicker {
	font-size: var(--sb-fs-body-lg);
	font-weight: 500;
	letter-spacing: 0.44em;
	text-indent: 0.44em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sb-gray-400);
}

/* --- Kategori badge --- */
.sb-badge {
	display: inline-block;
	padding: 0.25rem 0.9rem;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-orange);
	color: var(--sb-surface);
	font-size: 0.75rem;
	font-weight: 500;
}

/* Durum varyantları: yaklaşan / planlanıyor / tamamlanmış */
.sb-badge--live {
	background: var(--sb-green);
}

.sb-badge--pending {
	background: var(--sb-amber);
}

.sb-badge--muted {
	background: var(--sb-gray-400);
}

/* --- Boş durum --- */
.sb-empty {
	padding: 2.5rem 1.5rem;
	border: 1px dashed var(--sb-line);
	border-radius: var(--sb-radius);
	background: var(--sb-card-bg);
	text-align: center;
	color: var(--sb-gray-700);
}

/* --- Kart --- */
.sb-card {
	background: var(--sb-surface);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow-card);
}

/* Kenarlıklı varyant: içeriği köşelerde kırpar (görselli kartlar) */
.sb-card--outlined {
	border: 1px solid var(--sb-line);
	overflow: hidden;
}

/* --- Üst etiket ve fosforlu kalem vurgusu --------------------------------
   Tanıtım sayfalarında doğdu, artık Hakkımızda gibi başka sayfalarda da
   kullanılıyor: bu yüzden bileşen dosyasında duruyor (tanitim.css yalnız
   tanıtım şablonlarında yükleniyor).
   ------------------------------------------------------------------------- */
.sb-lp-kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sb-primary);
}

/* --- Vurgulu cümle başlık --------------------------------------------------
   Altı işlev ayrı bir etiket bloğu değil: cümlenin içinde, altı çizili
   fosforlu kalem izi gibi vurgulanır. Vurgu arka plan degradesiyle çizilir,
   satır sonunda doğru kırılsın diye box-decoration-break: clone.
   ------------------------------------------------------------------------- */
.sb-lp-mark {
	margin-top: 0.9rem;
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--sb-ink);
}

.sb-lp-mark--lead {
	margin-top: 0;
}

.sb-lp-mark__item {
	--sb-accent: var(--sb-primary);

	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	/* Sağdaki iç boşluk negatif kenar boşluğuyla geri alınır: ardından gelen
	   virgül vurgudan kopuk durmasın. */
	padding: 0 0.14em;
	margin-right: -0.14em;
	background-image: linear-gradient(
		to top,
		color-mix(in srgb, var(--sb-accent) var(--sb-mark-strength, 32%), transparent) 0.52em,
		transparent 0.52em
	);
	white-space: nowrap;
}

.sb-lp-mark__item:nth-of-type(6n + 2) { --sb-accent: var(--sb-blue); }
.sb-lp-mark__item:nth-of-type(6n + 3) { --sb-accent: var(--sb-amber); }
.sb-lp-mark__item:nth-of-type(6n + 4) { --sb-accent: var(--sb-green); }
.sb-lp-mark__item:nth-of-type(6n + 5) { --sb-accent: var(--sb-purple); }
.sb-lp-mark__item:nth-of-type(6n + 6) { --sb-accent: var(--sb-teal); }

/* Dar ekranda vurgulu öbek satıra sığmıyor ve sayfayı yatayda taşırıyordu.
   box-decoration-break: clone zaten kırılan parçaları doğru boyadığı için
   sarmaya izin vermek yeterli. */
@media (max-width: 600px) {
	.sb-lp-mark__item {
		white-space: normal;
	}
}