/*
 * Çocuk satranç kursu sayfası.
 *
 * Yalnız bu sayfaya özgü sınıflar burada. Ortak olanlar (.rca-bolum,
 * .rca-kapsayici, .rca-dugme, .rca-isik-kutusu ...) duzen.css'te ve
 * yeniden tanımlanmıyor.
 *
 * HAM RENK VE PUNTO YOK: hepsi degiskenler.css'teki belirteçlerden geliyor.
 */

/* KAPSAYICI ANASAYFAYLA AYNI (1300px, --rca-kapsayici).
   Bir süre 46rem'e daraltılmıştı; kullanıcı iki sayfayı yan yana koyunca
   fark görülüyordu (2026-09-08) ve daraltma kaldırıldı. Sınıf duruyor,
   çünkü bölümler arasındaki ayraç çizgisi ona bağlı.

   Uzun satır sorunu kapsayıcıda değil METİNDE çözülüyor: paragraflar
   aşağıda 46rem ile sınırlı, kartlar ve galeri tam genişliği kullanıyor.
   Anasayfa da aynı şekilde davranıyor — geniş kapsayıcı, dar metin sütunu. */
.rca-cocuk-dar {
	max-width: var(--rca-kapsayici);
}

.rca-cocuk-bolum {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

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

/* Paragraflar kapsayıcının tamamını kullanıyor.
   Bir süre 46rem ile sınırlıydı (okuma genişliği); kapsayıcı anasayfa
   ölçüsüne çıkınca metin dar kalıp sağda büyük bir boşluk bırakıyordu ve
   kullanıcı bunu bildirdi (2026-09-08). Sınır kaldırıldı.

   Not: 1263px'te satırlar uzun — kart ve künye gibi yapılı bölümler bunu
   dengeliyor, düz metin bloğu sayfada azınlıkta. */
.rca-cocuk p {
	max-width: none;
}

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

/* --- Kahraman --- */

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

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

.rca-cocuk-eylemler {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* Dar ekranda iki düğme alt alta düşüyor ve her biri kendi metnine göre
   genişliyordu — "Ücretsiz deneme dersi al" uzun, "Eğitmenlerimizi tanıyın"
   kısa kalıyordu. Sütuna alınıp gerdirilerek eşitlendi; metinler de
   ortalandı, yoksa kısa etiket geniş düğmenin solunda asılı kalıyor. */
@media (max-width: 34rem) {
	.rca-cocuk-eylemler {
		flex-direction: column;
		align-items: stretch;
	}

	/* Genişlik gerdirmeyle eşitlendi ama YÜKSEKLİK de eşit olmalı: temanın
	   iki düğme sınıfının dolgusu farklı ve ölçüldüğünde 60px ile 42px
	   çıkıyordu. İkisi de birincil düğmenin yüksekliğine sabitlendi —
	   küçülten değil büyüten yön seçildi ki dokunma hedefi daralmasın. */
	.rca-cocuk-eylemler .rca-dugme {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 3.75rem;
		text-align: center;
	}
}

.rca-cocuk-kahraman-foto {
	margin: 1.75rem 0 0;
}

/* Kapsayıcı anasayfa genişliğine çıkınca fotoğraf 1207x806'ya kadar
   büyüyüp sayfanın geri kalanını aşağı itiyordu (ölçüldü). Banner oranına
   oturtuldu; kaynak 3:2 olduğu için üstten ve alttan kırpılıyor, yüzler
   ortada kaldığı için kırpma onlara dokunmuyor. */
.rca-cocuk-kahraman-foto img {
	display: block;
	width: 100%;
	/* `height: auto` ŞART: <img> etiketindeki height="1067" niteliği CSS'e
	   sunum ipucu olarak geçiyor; yükseklik böyle sabitlenince aspect-ratio
	   yok sayılıyor. Ölçüldü — kural uygulanmış görünüyor ama yükseklik
	   1067px kalıyordu. */
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center 45%;
	border-radius: 1rem;
	border: 1px solid var(--rca-cizgi-kart);
}

@media (max-width: 47.5rem) {
	/* Dar ekranda 2:1 fazla ince kalıyor; oran gevşetiliyor. */
	.rca-cocuk-kahraman-foto img {
		aspect-ratio: 4 / 3;
	}
}

/* --- Kazanım kartları --- */

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

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

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

/* --- Künye (etiket / değer listesi) --- */

.rca-cocuk-kunye {
	margin: 1rem 0 1.25rem;
	border-top: 1px solid var(--rca-cizgi-ince);
}

.rca-cocuk-kunye-satir {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding-block: 0.8125rem;
	border-bottom: 1px solid var(--rca-cizgi-ince);
}

.rca-cocuk-kunye-satir dt {
	flex: 0 0 40%;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rca-metin-3);
}

.rca-cocuk-kunye-satir dd {
	flex: 1;
	margin: 0;
	font-weight: 600;
	color: var(--rca-baslik);
}

@media (max-width: 34rem) {
	.rca-cocuk-kunye-satir {
		flex-direction: column;
		gap: 0.25rem;
	}

	.rca-cocuk-kunye-satir dt {
		flex: none;
	}
}

/* --- Robo kartı --- */

.rca-cocuk-robo {
	background: var(--rca-baslik);
	color: var(--rca-metin-koyu);
	border-radius: 1.125rem;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	display: grid;
	/* Video dikey (720x1280). Tek sütunda sağında büyük boşluk kalıyordu. */
	grid-template-columns: minmax(0, 1fr) 17.875rem;
	gap: 1.875rem;
	align-items: center;
}

.rca-cocuk-robo-metin {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.rca-cocuk-robo .rca-baslik-2,
.rca-cocuk-robo h2 {
	color: var(--rca-zemin);
}

.rca-cocuk-robo p {
	color: var(--rca-metin-koyu);
	max-width: 36rem;
}

.rca-cocuk-oynat {
	position: relative;
	display: block;
	width: 100%;
	max-width: 17.875rem;
	padding: 0;
	border: 1px solid rgba(252, 245, 234, 0.22);
	border-radius: 1rem;
	overflow: hidden;
	background: rgba(252, 245, 234, 0.06);
	cursor: pointer;
}

.rca-cocuk-oynat img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 47.5rem) {
	.rca-cocuk-robo {
		grid-template-columns: 1fr;
		gap: 1.375rem;
	}

	.rca-cocuk-oynat {
		margin-inline: auto;
	}
}

/* Dikey video ışık kutusunda ekranı taşırmasın. */
.rca-cocuk-video {
	max-height: 82vh;
	width: auto;
	max-width: 100%;
}

/* --- Eğitmen şeridi --- */

.rca-cocuk-hocalar {
	list-style: none;
	margin: 1.125rem 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
	gap: 0.875rem;
	/* Üç kart geniş kapsayıcıda 420px'e kadar geriliyordu; ad ve unvan
	   taşıyan bir kart için fazla. Sınırlanınca solda toplanıyordu, bu
	   yüzden ortalanıyor (kullanıcı isteği, 2026-09-08). */
	max-width: 52rem;
	margin-inline: auto;
}

/* Özgeçmiş bağlantısı kartlarla aynı hizada: aynı genişlikte ortalanmış
   bir kapta duruyor ve sağa yaslanıyor, yani son kartın altına geliyor.

   SEÇİCİ BİLEREK `.rca-cocuk p.…`: yukarıdaki `.rca-cocuk p` kuralı bir
   sınıf + bir tür (0,1,1) taşıyor ve tek sınıflı bir kuraldan (0,1,0)
   güçlü. Çıplak sınıfla yazıldığında `max-width` uygulanmıyordu —
   ölçüldü, bağlantı 1207px kalıyordu. */
.rca-cocuk p.rca-cocuk-hoca-baglanti {
	max-width: 52rem;
	margin: 0 auto;
	text-align: right;
}

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

.rca-cocuk-hoca-ad {
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	color: var(--rca-baslik);
}

.rca-cocuk-hoca-unvan {
	font-size: 0.8438rem;
	color: var(--rca-metin-3);
}

.rca-cocuk-baglanti {
	font-weight: 700;
	color: var(--rca-marka-koyu);
}

/* --- Galeri --- */

.rca-cocuk-galeri {
	list-style: none;
	margin: 1.125rem 0 0;
	padding: 0;
	display: grid;
	/* 1263px'te minmax(9.375rem) 7 sütun veriyordu: küçük resimler küçülüyor
	   ve 10 fotoğraf 7+3 diye dağılıyordu. 14rem ile 5 sütun çıkıyor, yani
	   iki tam satır.

	   `min(14rem, 46%)` ŞART: düz 14rem yazıldığında 375px'te tek sütuna
	   düşüyordu (ölçüldü) — 224px'lik iki sütun 339px'e sığmıyor. Yüzde
	   sınırı dar ekranda devreye girip 2 sütunu koruyor. */
	grid-template-columns: repeat(auto-fill, minmax(min(14rem, 46%), 1fr));
	gap: 0.75rem;
}

.rca-cocuk-kare {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--rca-yuzey);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rca-cocuk-kare:hover {
	transform: translateY(-2px);
	box-shadow: 0 0.625rem 1.375rem -0.875rem rgba(43, 33, 26, 0.55);
}

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

/* --- Fotoğraf ışık kutusu --- */

.rca-foto-cerceve {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.rca-foto-cerceve img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 0.5rem;
}

.rca-foto-cerceve figcaption {
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: rgba(252, 245, 234, 0.6);
}

.rca-foto-gez {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.875rem;
	height: 2.875rem;
	border-radius: 50%;
	border: 1px solid rgba(252, 245, 234, 0.24);
	background: rgba(252, 245, 234, 0.12);
	color: var(--rca-zemin);
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.rca-foto-gez:hover {
	background: rgba(252, 245, 234, 0.22);
}

.rca-foto-onceki {
	left: 0.75rem;
}

.rca-foto-sonraki {
	right: 0.75rem;
}

@media (max-width: 35rem) {
	.rca-foto-gez {
		width: 2.5rem;
		height: 2.5rem;
	}

	.rca-foto-onceki {
		left: 0.5rem;
	}

	.rca-foto-sonraki {
		right: 0.5rem;
	}
}

/* --- Kapanış --- */

.rca-cocuk-kapanis {
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(2.5rem, 2rem + 2.4vw, 4rem);
}

.rca-cocuk-kapanis-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-cocuk-kapanis-kart .rca-baslik-2,
.rca-cocuk-kapanis-kart h2 {
	color: var(--rca-zemin);
	margin: 0;
}

.rca-cocuk-kapanis-kart p {
	color: var(--rca-metin-yesil);
	margin: 0;
	max-width: 32rem;
}

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

@media (prefers-reduced-motion: reduce) {
	.rca-cocuk-kare {
		transition: none;
	}
}

/* --- Dikey videonun ışık kutusu ---
   Ortak `.rca-isik-kutusu` genişliği YATAY videoya göre hesaplanmış:
   496x288'lik TRT kaydının en-boy oranı formülün içinde. Robo'nun sınıf
   videosu ise dikey (720x1280); aynı formül kutuyu 1100px'e açıp videoyu
   ortada ince bir şerit hâlinde bırakıyordu.

   Burada genişlik videonun kendi oranından türetiliyor: yükseklik ne
   kadarsa genişlik onun 0,5625 katı (720/1280). Kapatma düğmesi kutunun
   52px yukarısında durduğu için yüksekliğe 120px pay bırakılıyor —
   ortak kuraldaki gerekçenin aynısı. */
.rca-cocuk-kutusu {
	width: min(26rem, 92vw, calc((100vh - 120px) * 0.5625));
}