/*
 * Eğitmenler sayfası.
 *
 * Yalnız bu sayfaya özgü sınıflar burada. Ortak olanlar (.rca-kapsayici,
 * .rca-baslik-1, .rca-baslik-2, .rca-dugme, .rca-gizli ...) temel.css ve
 * duzen.css'te; yeniden tanımlanmıyor.
 *
 * HAM RENK, PUNTO VE FONT YOK: hepsi degiskenler.css'teki belirteçlerden
 * geliyor. Yeni palet, yeni font ailesi, yeni düğme biçimi ve yeni gölge
 * yaklaşımı açılmadı; kart kenarı, köşe yarıçapı, yüzey renkleri ve bölüm
 * ritmi online sayfasındaki değerlerin aynısı.
 *
 * SINIF ÖNEKİ `.rca-ekip-` — `.rca-egitmen-` DEĞİL. O önek anasayfanın kart
 * ızgarası ve `<dialog>` özgeçmiş kutuları tarafından kullanılıyor
 * (anasayfa.css). İki dosya hiç birlikte yüklenmiyor ama aynı adın iki farklı
 * şeyi anlatması ileride birini düzeltirken diğerini aramaya yol açar.
 *
 * .rca-etiket VE .rca-govde-buyuk BURADA YENİDEN TANIMLANIYOR — online ve
 * çocuk sayfalarında olduğu gibi. Sebebi ölçülmüş bir eksik: bu iki sınıfın
 * kuralları `anasayfa.css` içinde ve o dosya yalnız anasayfada yükleniyor.
 * Değerler anasayfa.css'ten birebir alındı, uydurulmadı.
 */

/* Kapsayıcı anasayfa, çocuk ve online sayfalarıyla aynı (1300px). Sınıf
   duruyor çünkü bölümler arasındaki ayraç çizgisi ona bağlı. */
.rca-ekip-dar {
	max-width: var(--rca-kapsayici);
}

.rca-ekip .rca-etiket {
	margin: 0 0 20px;
	font-size: var(--rca-punto-etiket);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rca-marka);
}

.rca-ekip .rca-govde-buyuk {
	margin: 0 0 18px;
	font-size: var(--rca-punto-govde-buyuk);
	font-weight: 300;
	line-height: 1.7;
	color: var(--rca-metin);
	text-wrap: pretty;
}

/* Bölüm ritmi ve bölümler arası ayraç — online sayfasıyla aynı değerler. */
.rca-ekip-bolum {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.rca-ekip-bolum + .rca-ekip-bolum > .rca-ekip-dar {
	border-top: 1px solid var(--rca-cizgi-ince);
	padding-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.rca-ekip p {
	max-width: none;
}

.rca-ekip p + p {
	margin-top: 0.75rem;
}

/* Çapayla inilen bölüm yapışkan başlığın altında kalmasın. Değer başlık
   kapsülünün yüksekliğinden ve payından geliyor. */
.rca-ekip [id] {
	scroll-margin-top: 6rem;
}

/* --- Kahraman --- */

.rca-ekip-kahraman {
	padding-top: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.rca-ekip-kahraman-ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: center;
}

.rca-ekip-kahraman-metin {
	min-width: 0;
}

.rca-ekip-h1 {
	margin-block: 0.5rem 0.75rem;
}

/*
 * Üç daire yan yana. Ölçü 400px'lik kaynağın ALTINDA tutuluyor (en fazla
 * 150px), yani görsel hiçbir noktada gerilmiyor — kırpmalar poster kaynaklı
 * ve büyütmeye elverişli değil (bkz. profiller.php başlığı).
 */
.rca-ekip-kahraman-fotolar {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

.rca-ekip-kahraman-foto {
	display: block;
	width: clamp(5rem, 3.2rem + 7.4vw, 9.375rem);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--rca-cizgi-kart);
	background: var(--rca-yuzey);
}

/* Kahramanın altındaki üç güven kartı. */
.rca-ekip-guvenler {
	list-style: none;
	margin: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.875rem;
}

.rca-ekip-guven {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.875rem;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.rca-ekip-guven-deger {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	/* Uzun unvan dizisi ve uzun etiket dar kartta sarmalı, taşmamalı. */
	text-wrap: pretty;
}

.rca-ekip-guven-metin {
	font-size: 0.9688rem;
	color: var(--rca-metin-2);
}

/* --- Kadro kartları --- */

.rca-ekip-kartlar {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.875rem;
	/* Üç kart geniş kapsayıcıda gereğinden fazla geriliyordu; online
	   sayfasındaki eğitmen şeridiyle aynı yaklaşım. */
	max-width: 58rem;
	margin-inline: auto;
}

.rca-ekip-kart {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.875rem;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
}

.rca-ekip-kart-foto {
	display: block;
	width: 7.5rem;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--rca-cizgi-kart);
	margin-bottom: 0.5rem;
}

.rca-ekip-kart-ad {
	font-family: var(--rca-font-baslik);
	font-size: var(--rca-punto-egitmen-ad);
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0;
}

.rca-ekip-kart-unvan {
	margin: 0;
	font-size: var(--rca-punto-egitmen-unvan);
	color: var(--rca-marka-koyu);
	font-weight: 600;
}

.rca-ekip-kart-vurgu {
	margin: 0;
	font-size: 0.9688rem;
	color: var(--rca-metin-2);
}

/*
 * Uzmanlık hapları. Zemin ve punto robot bölümündeki haplardan geliyor.
 *
 * DÜZEN IZGARA, SARAN FLEX DEĞİL — ölçülmüş bir gerekçe (2026-09-12).
 * `flex-wrap` her kartta hapların KENDİ genişliğine göre sarıyordu ve üç
 * kart üç farklı düzen veriyordu (kart iç genişliği 258px, boşluk 6px):
 *
 *   Talib   93+71 = 170 sığıyor, +134 -> 304  sarıyor  -> 2+1
 *   Nasrin  62+97+75 = 246 sığıyor            sarmıyor -> 3
 *   Beyza   115+115 = 236 sığıyor, +75 -> 311 sarıyor  -> 2+1
 *
 * Üçünü de tek satıra almak MÜMKÜN DEĞİL: Talib'in satırı 304px istiyor,
 * yer 258px. Bu yüzden üçü de 2+1'e sabitlendi — düzen içeriğin uzunluğuna
 * değil ızgaraya bağlı, yani etiket metni değişse de üç kart aynı kalıyor.
 *
 * `minmax(0, auto)`: sütun içeriğin altına inebiliyor. Kart en dar hâlinde
 * (`minmax(15rem, 1fr)` tabanı) 200px iç genişliğe düşebiliyor ve Beyza'nın
 * ilk satırı 236px; sabit `auto` olsaydı kartın dışına taşardı. Bu tanımla
 * hap metni kendi içinde sarıyor, taşma olmuyor.
 */
.rca-ekip-etiketler {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, auto));
	justify-content: center;
	gap: 0.375rem;
}

/*
 * Üçüncü hap alt satırda, ortalanmış.
 *
 * `:nth-child(3):nth-last-child(1)` = "üçüncü VE sonuncu", yani kural
 * yalnız tam üç hap varken uyguluyor. Bugün üç eğitmenin de üç etiketi var;
 * biri dörde çıkarsa kural sessizce yanlış öğeye uygulanmak yerine hiç
 * uygulanmıyor ve ızgara iki sütunlu düzenini sürdürüyor.
 */
.rca-ekip-etiket-hap:nth-child(3):nth-last-child(1) {
	grid-column: 1 / -1;
	justify-self: center;
}

.rca-ekip-etiket-hap {
	background: var(--rca-hap-zemin);
	color: var(--rca-metin);
	border-radius: var(--rca-yuvarlak);
	padding: 0.25rem 0.6875rem;
	font-size: var(--rca-punto-kart-metin);
}

.rca-ekip-kart-bag,
.rca-ekip-bag {
	color: var(--rca-marka-koyu);
	font-weight: 600;
	font-size: 0.9688rem;
	text-decoration: none;
}

.rca-ekip-kart-bag {
	/* Kartın yüksekliği içeriğe göre değişiyor; bağlantı hep altta dursun ki
	   üç kartın son satırı hizalansın. */
	margin-top: auto;
	padding-top: 0.75rem;
}

.rca-ekip-kart-bag:hover,
.rca-ekip-kart-bag:focus-visible,
.rca-ekip-bag:hover,
.rca-ekip-bag:focus-visible {
	text-decoration: underline;
}

/* --- Eğitmen detay bölümleri --- */

/*
 * İki sütun. YÖN `order` İLE DEĞİŞTİRİLMİYOR — ters blokta ızgaranın sütun
 * tanımı yer değiştiriyor ve öğeler açıkça sütuna yerleştiriliyor. `order`
 * kullanmak DOM sırasını olduğu yerde bırakır ve bitişik kardeş (`+`)
 * kuralları yanlış öğeye uygulanır; `project.md`'de kayıtlı, kabin
 * sekmelerinde ölçülmüş bir tuzak.
 *
 * Fotoğraf sütunu KAYNAK GENİŞLİĞİNDE sabit (400px): varlıklar 400x400 ve
 * gerdirilirse bulanıklaşır.
 */
.rca-ekip-profil-ic {
	display: grid;
	grid-template-columns: 25rem minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	align-items: start;
}

/*
 * `grid-row: 1` ŞART — ölçülmüş bir kusurun düzeltmesi (2026-09-12).
 *
 * Ters blokta yalnız `grid-column` verilmişti. DOM'da `<figure>` önce
 * geliyor ve 2. sütuna yerleşiyor; ardından metin 1. sütunu istiyor, ama
 * ızgaranın varsayılan yerleştirmesi GERİYE GİTMEZ ve metni 2. SATIRA
 * atıyor. Sonuç: Nasrin Babayeva bölümünde fotoğraf sağ üstte tek başına
 * duruyor, metin onun 444px altında başlıyordu (ölçüldü: foto üst 2157,
 * metin üst 2601; diğer iki bölümde ikisi de aynı değerde).
 *
 * Satırı açıkça vermek `grid-auto-flow: dense`den daha güvenli: dense
 * boşluk doldurma kuralıdır ve ileride bloğa üçüncü bir öğe eklenirse onu
 * da beklenmedik bir yere taşır. Burada iki öğenin de yeri kesin yazılı.
 */
.rca-ekip-profil-foto {
	margin: 0;
	min-width: 0;
	grid-column: 1;
	grid-row: 1;
}

.rca-ekip-profil-metin {
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.rca-ekip-profil-ters .rca-ekip-profil-ic {
	grid-template-columns: minmax(0, 1fr) 25rem;
}

.rca-ekip-profil-ters .rca-ekip-profil-foto {
	grid-column: 2;
	grid-row: 1;
}

.rca-ekip-profil-ters .rca-ekip-profil-metin {
	grid-column: 1;
	grid-row: 1;
}

.rca-ekip-profil-foto img {
	display: block;
	width: 100%;
	/* `height: auto` ŞART: <img> etiketindeki height niteliği CSS'e sunum
	   ipucu olarak geçiyor ve yükseklik sabitlenirse oran yok sayılıyor. */
	height: auto;
	border-radius: 1rem;
	border: 1px solid var(--rca-cizgi-kart);
	background: var(--rca-yuzey);
}

.rca-ekip-profil-ad {
	margin-block: 0 0.75rem;
}

/* Göstergeler — kahramandaki güven kartlarıyla aynı bileşen, dar hâli. */
.rca-ekip-gostergeler {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.75rem;
}

.rca-ekip-gosterge {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.875rem;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
}

.rca-ekip-gosterge-deger {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	text-wrap: pretty;
}

.rca-ekip-gosterge-metin {
	font-size: var(--rca-punto-kart-metin);
	color: var(--rca-metin-2);
}

.rca-ekip-alt-baslik {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 1.75rem 0 0.5rem;
}

/*
 * Çalışma alanları. İŞARET CSS'TEN GELİYOR, TARAYICIDAN DEĞİL: tema bütün
 * listeleri sıfırlıyor (`temel.css`) ve kap `display: grid` olduğu için
 * tarayıcının kendi işareti güvenilir çizilmiyor — online sayfasında
 * ölçülmüş ve orada da aynı yöntemle çözülmüş durum.
 */
.rca-ekip-alanlar {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--rca-metin);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.375rem 1rem;
}

.rca-ekip-alanlar li {
	position: relative;
	padding-left: 1rem;
}

.rca-ekip-alanlar li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

.rca-ekip-diller {
	margin-top: 1.25rem;
	color: var(--rca-metin);
	font-size: 0.9688rem;
}

.rca-ekip-diller-etiket {
	font-weight: 600;
	color: var(--rca-baslik);
}

.rca-ekip-fide {
	margin-top: 1rem;
}

/* --- Senaryolar ve ilkeler --- */

.rca-ekip-senaryolar,
.rca-ekip-ilkeler {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.875rem;
}

/* Geniş ekranda sabit sütun: serbest `auto-fit` üç senaryoyu 2+1, dört
   ilkeyi 3+1 diye bölebiliyor ve son satır yarım kalıyor. Online
   sayfasındaki kart ızgarasında ölçülmüş ve orada da böyle çözülmüş. */
@media (min-width: 60.0625rem) {
	.rca-ekip-senaryolar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rca-ekip-ilkeler {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rca-ekip-senaryo,
.rca-ekip-ilke {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.875rem;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rca-ekip-senaryo-ad,
.rca-ekip-ilke-ad {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0;
	text-wrap: pretty;
}

.rca-ekip-senaryo-metin,
.rca-ekip-ilke-metin {
	margin: 0;
	color: var(--rca-metin-2);
	font-size: 0.9688rem;
}

/* --- Online şeridi --- */

.rca-ekip-serit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.rca-ekip-serit-metin {
	min-width: 0;
	flex: 1 1 22rem;
}

.rca-ekip-serit-metin .rca-baslik-2 {
	margin-block: 0 0.5rem;
}

.rca-ekip-serit-metin p:last-child {
	margin-bottom: 0;
}

.rca-ekip-serit-dugme {
	flex: 0 0 auto;
}

/* --- Kapanış çağrısı --- */

/* Online sayfasındaki çağrı kartıyla aynı bileşen; yeni bir görsel dil
   açılmadı. */
.rca-ekip-cagri-kart {
	background: var(--rca-marka);
	border-radius: 1.125rem;
	padding: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
}

.rca-ekip-cagri-kart .rca-baslik-2,
.rca-ekip-cagri-kart h2 {
	color: var(--rca-zemin);
	margin: 0;
}

.rca-ekip-cagri-kart p {
	color: var(--rca-metin-yesil);
	margin: 0;
	max-width: 36rem;
}

.rca-ekip-cagri-vurgu {
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	color: var(--rca-zemin);
}

.rca-ekip-cagri-kart .rca-dugme-birincil {
	background: var(--rca-zemin);
	color: var(--rca-marka-koyu);
}

.rca-ekip-guven-satir {
	font-size: 0.875rem;
}

/* --- Dar ekran --- */

/*
 * 60rem (960px) eşiği: iki sütunlu detay bloğunda metin sütunu bu noktanın
 * altında 400px'lik fotoğraf sütunuyla birlikte sıkışmaya başlıyor.
 */
@media (max-width: 60rem) {
	.rca-ekip-kahraman-ic {
		grid-template-columns: minmax(0, 1fr);
	}

	.rca-ekip-kahraman-fotolar {
		justify-content: flex-start;
	}

	/*
	 * Tek sütuna inerken DOM sırası korunuyor: önce fotoğraf, sonra metin.
	 * Masaüstündeki dönüşümlü yön burada anlamsız bir sıra üretmiyor — her
	 * blok aynı okunuş düzenine sahip.
	 *
	 * `grid-column` AÇIKÇA SIFIRLANIYOR. Yukarıdaki kurallar öğeleri 1. ve
	 * 2. sütuna sabitliyor; tek sütunlu ızgarada `grid-column: 2` öğeyi var
	 * olmayan bir sütuna atar ve tarayıcı örtük bir ikinci sütun açar.
	 */
	.rca-ekip-profil-ic,
	.rca-ekip-profil-ters .rca-ekip-profil-ic {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * `grid-row` de sıfırlanıyor. Geniş ekranda iki öğe de 1. satıra
	 * sabitli; tek sütuna inerken bu sabit kalsaydı ikisi AYNI hücreye
	 * yığılır ve fotoğraf metnin üstüne binerdi.
	 */
	.rca-ekip-profil-foto,
	.rca-ekip-profil-metin,
	.rca-ekip-profil-ters .rca-ekip-profil-foto,
	.rca-ekip-profil-ters .rca-ekip-profil-metin {
		grid-column: 1;
		grid-row: auto;
	}

	/* Fotoğraf tek sütunda tam genişliğe gerilmesin — kaynak 400px. */
	.rca-ekip-profil-foto {
		max-width: 20rem;
	}
}

@media (max-width: 40rem) {
	.rca-ekip-serit-dugme {
		width: 100%;
		text-align: center;
	}
}