/*
 * Online satranç dersleri sayfası.
 *
 * Yalnız bu sayfaya özgü sınıflar burada. Ortak olanlar (.rca-kapsayici,
 * .rca-baslik-1, .rca-baslik-2, .rca-dugme ...) 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ı ve yüzey renkleri çocuk
 * sayfasındaki değerlerin aynısı.
 *
 * .rca-etiket VE .rca-govde-buyuk BURADA YENİDEN TANIMLANIYOR — sebebi
 * ölçülmüş bir eksik: bu iki sınıfın kuralları `anasayfa.css` içinde ve o
 * dosya yalnız anasayfada yükleniyor. Çocuk sayfasında da aynı durum var
 * (etiket 16px, büyütmesiz çıkıyor). Ortak dosyaya taşımak bu işin kapsamı
 * dışında olduğu için kurallar sayfa köküne bağlı olarak kopyalandı;
 * değerler anasayfa.css'ten birebir alındı, uydurulmadı.
 */

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

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

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

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

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

/* --- Kahraman --- */

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

/* Metin ve görsel yan yana. Görselin sütunu KAYNAK GENİŞLİĞİNDE sabit
   (520px): dosya 520x325 ve gerdirilirse bulanıklaşır. Çocuk sayfasının
   kahraman fotoğrafı 1600px'ti ve tam genişlik banner olabiliyordu; bu
   varlık onu kaldırmıyor. */
.rca-online-kahraman-ic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32.5rem;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: center;
}

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

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

.rca-online-kahraman-foto {
	margin: 0;
	min-width: 0;
}

.rca-online-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: 1rem;
	border: 1px solid var(--rca-cizgi-kart);
}

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

/* Kahramanın altındaki üç sayı. */
.rca-online-ozellikler {
	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-online-ozellik {
	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-online-ozellik-deger {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
}

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

/* --- Kartlar (nasıl işliyor · kimler · neden birebir) --- */

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

/* Geniş ekranda ÜÇ SÜTUNA sabit. Ölçüldü (1440px): serbest `auto-fit`
   altı kartı 4+2 diye bölüyordu ve son satır yarım kalıyordu. Sayfadaki
   iki kart ızgarası da (altı ve üç kart) üçe tam bölünüyor. */
@media (min-width: 60.0625rem) {
	.rca-online-kartlar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

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

/* --- Madde listeleri ---
 *
 * İŞARET CSS'TEN GELİYOR, TARAYICIDAN DEĞİL. Tema bütün listeleri
 * sıfırlıyor (`temel.css`: `.rca-kabuk :where(ul, ol) { list-style: none }`)
 * ve bu sıfırlama sayfa biçemlerinden ÖNCE değil, sıfır özgüllükle
 * uygulanıyor; yani `padding-left` vermek yalnız girinti bırakıyor, işaret
 * basılmıyordu — ölçüldü (2026-09-09, `list-style-type: none`).
 *
 * Listeyi `list-style` ile geri açmak da yetmezdi: kaplar `display: grid`
 * ve ızgara öğelerinde tarayıcı işareti güvenilir biçimde çizmiyor.
 * Bu yüzden nokta `::before` ile çiziliyor — turnuva kartında zaten
 * kullanılan yöntemin aynısı.
 *
 * `currentColor`: aynı kural hem krem zeminli bölümlerde hem yeşil çağrı
 * kartında doğru renkte çıkıyor, iki ayrı kural gerekmiyor.
 */

.rca-online-madde-liste {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	color: var(--rca-metin);
	display: grid;
	gap: 0.375rem;
}

.rca-online-madde-liste li,
.rca-online-seviye-liste li {
	position: relative;
	padding-left: 1rem;
}

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

/* Bölüm içi ara başlık. Katlanan bölümlerden gelen alt konular için
   (bugün yalnız "Ders dili"); `<h2>` hiyerarşisini bozmadan konu ayırıyor. */
.rca-online-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;
}

/* Bölümler arası yönlendirme notu. */
.rca-online-icerik-not {
	margin-top: 1rem;
	color: var(--rca-metin-2);
	font-size: 0.9688rem;
}

/* --- Seviye ve karşılaştırma kartları --- */

.rca-online-seviyeler {
	margin-top: 1.25rem;
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.rca-online-seviye {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 0.875rem;
	padding: 1.25rem;
}

.rca-online-seviye-ad {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0 0 0.75rem;
}

.rca-online-seviye-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--rca-metin-2);
	font-size: 0.9688rem;
	display: grid;
	gap: 0.375rem;
}

/* --- Çağrı kartı (ücretsiz deneme dersi ve kapanış) --- */

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

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

.rca-online-cagri-kart .rca-online-madde-liste {
	margin: 0;
	display: grid;
	gap: 0.375rem;
}

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

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

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

/* --- Turnuva vurgusu (sayfanın tek koyu yüzeyi) --- */

.rca-online-vurgu {
	background: var(--rca-baslik);
	color: var(--rca-metin-koyu);
	border-radius: 1.125rem;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
}

.rca-online-vurgu .rca-baslik-2,
.rca-online-vurgu h2 {
	color: var(--rca-zemin);
	margin: 0 0 0.75rem;
}

.rca-online-vurgu p {
	color: var(--rca-metin-koyu);
	max-width: 44rem;
}

.rca-online-vurgu-liste {
	list-style: none;
	margin: 1.125rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.5rem 1rem;
}

.rca-online-vurgu-liste li {
	color: var(--rca-metin-koyu);
	font-size: 0.9688rem;
	padding-left: 1rem;
	position: relative;
}

/* Madde işareti CSS'te: koyu zeminde tarayıcının kendi işareti metinden
   daha parlak kalıyor. Görsel dosya kullanılmıyor. */
.rca-online-vurgu-liste li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.3125rem;
	height: 0.3125rem;
	border-radius: 50%;
	background: var(--rca-metin-koyu);
}

.rca-online-vurgu-kapanis {
	margin-top: 1.125rem;
	font-weight: 600;
	color: var(--rca-zemin);
}

/* --- Eğitmen kartları --- */

.rca-online-hocalar {
	list-style: none;
	margin: 1.25rem 0 1rem;
	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; çocuk
	   sayfasındaki eğitmen şeridiyle aynı sınır ve ortalama. */
	max-width: 52rem;
	margin-inline: auto;
}

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

.rca-online-hoca-foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.75rem;
	margin-bottom: 0.625rem;
}

.rca-online-hoca-ad {
	font-family: var(--rca-font-baslik);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--rca-baslik);
	margin: 0;
}

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

.rca-online-hoca-sure {
	margin: 0;
	font-size: 0.9062rem;
	color: var(--rca-metin-2);
}

/* Bağlantı kartlarla aynı hizada. Seçici bilerek `.rca-online p.…`:
   yukarıdaki `.rca-online p` kuralı bir sınıf + bir tür taşıyor ve tek
   sınıflı bir kuraldan güçlü. */
.rca-online p.rca-online-hoca-baglanti {
	max-width: 52rem;
	margin: 0 auto;
	text-align: right;
}

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

/* --- Ders dilleri --- */

.rca-online-diller {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.rca-online-dil {
	background: var(--rca-vurgu);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
}

.rca-online-dil-kod {
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	color: var(--rca-baslik);
}

.rca-online-dil-ad {
	font-size: 0.875rem;
	color: var(--rca-metin-2);
}

/* --- Sıkça sorulan sorular ---
   İşaretleme ve davranış anasayfadakiyle aynı (`<details>`/`<summary>`);
   değerler anasayfa.css'teki `.rca-sss-*` kurallarından birebir alındı.
   O dosya bu sayfada yüklenmediği için kurallar burada duruyor. */

.rca-online-sss-liste {
	margin-top: 1.25rem;
	display: grid;
	gap: 12px;
}

.rca-online-sss-madde {
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: 20px;
}

.rca-online-sss-soru {
	list-style: none;
	cursor: pointer;
	padding: 22px 26px;
	font-family: var(--rca-font-baslik);
	font-weight: 600;
	font-size: var(--rca-punto-sss-soru);
	line-height: normal;
	color: var(--rca-baslik);
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.rca-online-sss-soru::-webkit-details-marker {
	display: none;
}

.rca-online-sss-soru::marker {
	content: '';
}

.rca-online-sss-isaret {
	color: var(--rca-marka);
	flex: none;
}

.rca-online-sss-isaret::after {
	content: '+';
}

.rca-online-sss-madde[open] .rca-online-sss-isaret::after {
	content: '−';
}

.rca-online-sss-cevap {
	margin: 0;
	padding: 0 26px 24px;
	font-size: var(--rca-punto-seviye-metin);
	font-weight: 300;
	line-height: 1.65;
	color: var(--rca-metin);
}

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

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

/* =======================================================================
 * DAR EKRAN
 * ======================================================================= */

@media (max-width: 60rem) {
	/* Kahraman tek sütuna düşüyor: 520px'lik görsel sütunu bu genişliğin
	   altında metne 1fr'den az yer bırakıyor. */
	.rca-online-kahraman-ic {
		grid-template-columns: 1fr;
	}

	.rca-online-kahraman-foto img {
		max-width: 32.5rem;
	}
}

@media (max-width: 34rem) {
	/* DİL ETİKETLERİ ÜÇÜ BİR SATIRDA.
	 *
	 * Ölçüldü (390px): kapsayıcının iç genişliği 354px, üç etiket yan yana
	 * 364px istiyor — 10px eksik ve "FR Fransızca" alt satıra düşüyordu.
	 * Dolgu kırpmak 390'da yeterdi ama 360px'lik telefonlarda yine taşardı;
	 * bu yüzden ölçü tahminine değil ızgaraya bağlandı: üç eşit sütun,
	 * satır her genişlikte üç etiket taşıyor.
	 *
	 * Kod adın ÜSTÜNE alınıyor — yan yana dizilişte en uzun etiket
	 * ("EN İngilizce") sütuna sığmıyor, alt alta dizilişte sütun genişliğini
	 * yalnız "İngilizce" belirliyor. Punto ve dolgu küçültülmedi, yani
	 * okunaklılık masaüstüyle aynı kaldı.
	 */
	.rca-online-diller {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.rca-online-dil {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.125rem;
		padding: 0.625rem 0.5rem;
		text-align: center;
	}

	/* Düğme dar ekranda kendi metnine göre değil kartın genişliğine göre
	   duruyor — çocuk sayfasında ölçülen kuralın aynısı. */
	.rca-online-eylemler {
		flex-direction: column;
		align-items: stretch;
	}

	.rca-online-eylemler .rca-dugme,
	.rca-online-cagri-kart .rca-dugme {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 3.75rem;
		text-align: center;
	}

	.rca-online-cagri-kart {
		align-items: stretch;
	}

	.rca-online-sss-madde {
		border-radius: 16px;
	}

	.rca-online-sss-soru {
		padding: 15px 16px;
	}

	.rca-online-sss-cevap {
		padding: 0 16px 16px;
	}
}