/*
 * Hakkımızda 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 eğitmenler ve online sayfalarındaki değerlerin aynısı.
 *
 * SINIF ÖNEKİ `.rca-hk-` — `.rca-hakkimizda-` DEĞİL. O önek ANASAYFADAKİ
 * Hakkımızda bölümü tarafından kullanılıyor (anasayfa.css: .rca-hakkimizda,
 * .rca-hakkimizda-ust, .rca-hakkimizda-gorsel ...). İki dosya hiç birlikte
 * yüklenmiyor ama aynı adın iki farklı şeyi anlatması, ileride birini
 * düzeltirken diğerini aramaya yol açar — eğitmenler sayfasında `.rca-ekip-`
 * öneki tam bu gerekçeyle seçilmişti.
 *
 * .rca-etiket VE .rca-govde-buyuk BURADA YENİDEN TANIMLANIYOR — çocuk,
 * online ve eğitmenler 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ı.
 */

/* Kapsayıcı diğer sayfalarla aynı (1300px). Sınıf duruyor çünkü bölümler
   arasındaki ayraç çizgisi ona bağlı. */
.rca-hk-dar {
	max-width: var(--rca-kapsayici);
}

.rca-hk .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-hk .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ç — eğitmenler sayfasıyla aynı. */
.rca-hk-bolum {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

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

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

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

/* 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-hk [id] {
	scroll-margin-top: 6rem;
}

/* --- Kahraman --- */

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

.rca-hk-h1 {
	margin-block: 0.5rem 0.75rem;
	/* Uzun Türkçe başlık dar ekranda dengeli sarsın; kelime ortasından
	   kırılma yok. */
	text-wrap: balance;
}

/*
 * Kahraman fotoğrafı TEK SÜTUN, metnin altında. Çocuk sayfasının
 * kahramanında kurulan desenin aynısı: kare 1400x1000 ve yatay, iki sütuna
 * bölününce ya küçülüp anlamını kaybediyor ya metni sıkıştırıyor.
 */
.rca-hk-kahraman-foto {
	margin: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) 0 0;
}

.rca-hk-kahraman-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: var(--rca-yuvarlak-kart);
	border: 1px solid var(--rca-cizgi-kart);
	background: var(--rca-yuzey);
}

/* Kahramanın altındaki üç güven kartı — eğitmenler sayfasıyla aynı bileşen. */
.rca-hk-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-hk-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-hk-guven-deger {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	text-wrap: pretty;
}

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

/* --- İki sütunlu bloklar (Biz kimiz, Robo) --- */

/*
 * 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` 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üş tuzak.
 *
 * `grid-row: 1` de açıkça veriliyor: ızgaranın varsayılan yerleştirmesi
 * GERİYE GİTMEZ ve ilk öğe 2. sütuna konduğunda ikincisi 2. satıra düşer.
 * Eğitmen profillerinde ölçülmüş bir kusurun düzeltmesi.
 */
/*
 * `align-items: stretch` — VARSAYILAN, `center` DEĞİL. İlk yazımda `center`
 * vardı ve ölçülen sonuç yanlıştı: 1440px'te metin sütunu 570px, fotoğraf
 * ise kendi oranından 375px (1600x1067 kaynak, 562px sütunda). Aradaki
 * 195px ortalanınca fotoğrafın üstünde ve altında ~97px'lik boşluk
 * kalıyordu; yani fotoğrafın HİÇBİR kenarı metnin hiçbir kenarıyla
 * hizalanmıyor, blok ortada yüzüyor gibi duruyordu.
 *
 * Stretch ile fotoğraf sütunu dolduruyor: üst kenarı bölüm etiketiyle,
 * alt kenarı metnin son öğesiyle aynı hizada bitiyor.
 */
.rca-hk-ikili {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	align-items: stretch;
}

.rca-hk-ikili-metin {
	min-width: 0;
	grid-column: 1;
	grid-row: 1;
}

.rca-hk-ikili-foto {
	margin: 0;
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.rca-hk-ikili-ters .rca-hk-ikili-metin {
	grid-column: 2;
	grid-row: 1;
}

.rca-hk-ikili-ters .rca-hk-ikili-foto {
	grid-column: 1;
	grid-row: 1;
}

.rca-hk-ikili-metin .rca-baslik-2 {
	margin-block: 0 0.75rem;
}

/*
 * `display: grid` + tek hücre: `<img>`in yüzde yükseklik alabilmesi için
 * kabın çözülmüş bir yüksekliği olmalı. `min-height: 0` da şart — ızgara
 * öğesinin varsayılan `min-height: auto` değeri, öğenin içeriğinden daha
 * kısa olmasını engeller ve `object-fit`in kırpmasını imkânsız kılardı.
 */
.rca-hk-ikili-foto {
	display: grid;
	min-height: 0;
}

/*
 * FOTOĞRAF SÜTUNU DOLDURUYOR, KIRPILARAK. İki karede de özne ortada:
 * galeri-04'te çocuk ve (bulanık ön planda) Robo, galeri-01'de masadaki
 * grup. Merkez kırpma ikisinde de özneyi koruyor — `object-position`
 * bilerek varsayılan `center` bırakıldı.
 *
 * Kırpma oranı metnin uzunluğuna bağlı ve en fazla kareye yaklaşıyor
 * (1440px'te 562x570). Kaynak 1600x1067 olduğu için kırpılmış hâlde bile
 * görüntülenen ölçünün çok üstünde; büyütme yok, bulanıklaşma yok.
 */
.rca-hk-ikili-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rca-yuvarlak-kart);
	border: 1px solid var(--rca-cizgi-kart);
	background: var(--rca-yuzey);
}

/* --- Vurgu cümlesi --- */

/* Marka mesajı. Zemin `--rca-vurgu`; anasayfadaki rozet ve şeritlerde
   kullanılan renk, yeni bir ton açılmadı. */
.rca-hk-vurgu {
	margin: 1.5rem 0 0;
	background: var(--rca-vurgu);
	border-radius: 0.875rem;
	padding: 1.125rem 1.375rem;
	font-family: var(--rca-font-baslik);
	font-size: var(--rca-punto-kart-baslik);
	font-weight: 700;
	line-height: 1.45;
	color: var(--rca-baslik);
	text-wrap: pretty;
}

/* Robo bölümündeki üçlü künye satırı: aynı kutu, daha sakin punto. */
.rca-hk-vurgu-ince {
	font-size: var(--rca-punto-hap);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* --- Numaralı adımlar (yaklaşım ve model) --- */

.rca-hk-adimlar {
	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` dört adımı 3+1 diye
   bölebiliyor ve son satır yarım kalıyor. Eğitmenler ve online
   sayfalarındaki kart ızgaralarında ölçülmüş ve orada da böyle çözülmüş. */
@media (min-width: 60.0625rem) {
	.rca-hk-adimlar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rca-hk-adim {
	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-hk-adim-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background: var(--rca-hap-zemin);
	color: var(--rca-marka-koyu);
	font-family: var(--rca-font-baslik);
	font-size: var(--rca-punto-numara);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

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

.rca-hk-adim-metin {
	margin: 0;
	color: var(--rca-metin-2);
	font-size: 0.9688rem;
}

/* --- TRT küçük resmi --- */

/*
 * Yayını sayfadan çıkmadan açan küçük resim. Işık kutusunun kendisi
 * `duzen.css`te (`.rca-isik-kutusu`, `.rca-oynat`) ve her sayfada yükleniyor;
 * burada yalnız küçük resmin kabı tanımlı.
 *
 * Ölçüler anasayfadaki TRT kartının küçük resminden (`.rca-trt-kucuk-resim`)
 * alındı: aynı en-boy oranı, aynı yarıçap ailesi, aynı `transform` geçişi.
 * Yeni bir görsel dil açılmadı.
 */
.rca-hk-trt {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
}

/* `position: relative` ŞART: oynat dairesi `position: absolute` ve kabını
   arıyor (duzen.css). Düğmenin tarayıcı varsayılanları da burada
   sıfırlanıyor — `.rca-trt-kucuk-resim`te olduğu gibi. */
.rca-hk-trt-kare {
	box-sizing: content-box;
	flex: none;
	position: relative;
	display: block;
	width: clamp(92px, 70px + 4.2vw, 120px);
	aspect-ratio: 16 / 10;
	padding: 0;
	border-radius: clamp(12px, 10.3px + 0.32vw, 14px);
	overflow: hidden;
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-trt-yer-tutucu-kenar);
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: transform 140ms ease;
}

.rca-hk-trt-kare img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rca-hk-trt-kare:hover .rca-oynat-kucuk,
.rca-hk-trt-kare:focus-visible .rca-oynat-kucuk {
	transform: translate(-50%, -50%) scale(1.08);
}

.rca-hk-trt-metin {
	min-width: 0;
	flex: 1 1 12rem;
	margin: 0;
	color: var(--rca-metin-2);
	font-size: 0.9688rem;
}

.rca-hk-trt-etiket {
	display: block;
	margin-bottom: 0.1875rem;
	color: var(--rca-metin-3);
	font-size: var(--rca-punto-trt-etiket);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- İç bağlantılar --- */

.rca-hk-baglanti {
	margin: 1.25rem 0 0;
}

.rca-hk-bag {
	color: var(--rca-marka-koyu);
	font-weight: 700;
	font-size: 0.9688rem;
	text-decoration: none;
}

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

/* --- Kartlar (kimler, değerler) --- */

.rca-hk-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;
}

@media (min-width: 60.0625rem) {
	.rca-hk-kartlar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rca-hk-kartlar-dort {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rca-hk-kart {
	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-hk-kart-ad {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0;
	text-wrap: pretty;
}

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

/* --- Ara başlıklar --- */

.rca-hk-alt-baslik {
	font-family: var(--rca-font-baslik);
	font-size: var(--rca-punto-yer-baslik);
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0 0 0.5rem;
	text-wrap: pretty;
}

/* Değerler başlığı bir kart ızgarasının değil bir paragrafın ardından
   geliyor; nefes payı daha geniş. */
.rca-hk-alt-baslik-ayri {
	margin-top: 2rem;
}

.rca-hk-yas {
	margin-top: 2rem;
}

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

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

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

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

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

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

/* --- Ortam galerisi --- */

/*
 * Üç fotoğraf, tıklanmıyor. Kaynaklar 480x719 (dikey) ve ekranda en fazla
 * o genişlikte duruyor, yani hiçbir noktada gerilmiyor.
 *
 * `object-fit: cover` + sabit oran: üç kare aynı yükseklikte hizalansın.
 * Oran kaynağınkine (2/3) yakın seçildi, böylece kırpma payı küçük.
 */
.rca-hk-galeri {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.875rem;
	/* Üç kare 1300px'lik kapsayıcıya yayılınca sütun 405px oluyor ve galeri
	   bölümün ana görseli gibi duruyordu; burada amaç ortamı göstermek,
	   fotoğrafı incelettirmek değil. 46rem'de sütun 240px'e iniyor ve
	   kaynağın (480px) yarısının üstünde kalıyor. Kadro ızgarasında da
	   kullanılan yaklaşım. */
	max-width: 46rem;
}

.rca-hk-galeri-oge {
	margin: 0;
}

.rca-hk-galeri img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0.875rem;
	border: 1px solid var(--rca-cizgi-kart);
	background: var(--rca-yuzey);
}

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

/* Online ve eğitmenler sayfalarındaki çağrı kartıyla aynı bileşen. */
.rca-hk-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-hk-cagri-kart .rca-baslik-2,
.rca-hk-cagri-kart h2 {
	color: var(--rca-zemin);
	margin: 0;
}

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

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

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

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

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

/*
 * 64rem (1024px) eşiği — EĞİTMENLER SAYFASINDAKİNDEN (60rem) DAHA YÜKSEK VE
 * SEBEBİ ÖLÇÜLDÜ.
 *
 * Fotoğraf sütunu metnin boyunu doldurduğu için kırpma oranı sütun
 * genişliğine bağlı: sütun daralırken kutu aynı kalıyor ama metin uzuyor.
 * Robo bölümünde ölçülen kutu oranları (genişlik / yükseklik):
 *
 *     1440px  0,98      1200px  0,90      1024px  0,70
 *     1366px  0,98      1100px  0,80       970px  0,64
 *
 * 1600x1067'lik kaynakta 0,70 oranı görüntünün %46'sını gösteriyor ve
 * kırpılmış hâl hâlâ doğru şeyi anlatıyor: çocuk, tahtaya uzanan kolu,
 * taşlar ve solda bulanık Robo. 0,64'te Robo bir şeride iniyor.
 *
 * Bu yüzden eşik 60rem değil 64rem: iki sütun 1024px'in ÜSTÜNDE başlıyor,
 * yani en kötü oran ölçülmüş ve kabul edilmiş olan 0,70 oluyor. 960-1024
 * bandı (yatay tablet) tek sütuna iniyor ve orada fotoğraf kendi oranıyla,
 * kırpılmadan basılıyor.
 */
@media (max-width: 64rem) {
	.rca-hk-ikili,
	.rca-hk-ikili-ters {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Tek sütuna inerken METİN ÖNCE. `grid-column` ve `grid-row` açıkça
	 * sıfırlanıyor: yukarıdaki kurallar öğeleri 1./2. sütuna ve 1. satıra
	 * sabitliyor; tek sütunlu ızgarada `grid-column: 2` var olmayan bir
	 * sütuna işaret eder ve sabit `grid-row: 1` iki öğeyi aynı hücreye
	 * yığar. `order` KULLANILMIYOR — bkz. yukarıdaki not.
	 */
	.rca-hk-ikili-metin,
	.rca-hk-ikili-foto,
	.rca-hk-ikili-ters .rca-hk-ikili-metin,
	.rca-hk-ikili-ters .rca-hk-ikili-foto {
		grid-column: 1;
		grid-row: auto;
	}

	/*
	 * Fotoğraf tek sütunda ölçüsüz büyümesin.
	 *
	 * KIRPMA DA KALKIYOR: geniş ekranda fotoğraf metin sütununun boyunu
	 * dolduruyordu, burada yanında doldurulacak bir sütun yok. `height`
	 * doğal değerine dönünce kutu karenin kendi oranını alıyor ve
	 * `object-fit: cover` kırpacak bir şey bulamıyor — ayrıca sıfırlanması
	 * gerekmiyor. Ölçüldü: 390px'te 354x237, oran 1,50 (kaynak 1600x1067).
	 */
	.rca-hk-ikili-foto {
		max-width: 34rem;
	}

	.rca-hk-ikili-foto img {
		height: auto;
	}
}

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