/*
 * Font tanımları, kapsamlanmış sıfırlama ve tipografi.
 *
 * DİKKAT — çıplak genel seçici yasağı. Bu CSS, LatePoint randevu
 * sihirbazının üstünde de çalışıyor (spec §12: tam kabuk). Sihirbaz baştan
 * aşağı form öğesidir; genel bir `input` veya `button` kuralı onu sessizce
 * bozar. Bu yüzden sıfırlama .rca-* kapsayıcıları altına kapsamlandı.
 * body üzerindeki iki kural (zemin ve gövde fontu) bilinçli istisnadır:
 * marka bütünlüğü için gereklidir ve düzeni etkilemez.
 */

/* Bricolage Grotesque — DEĞİŞKEN font: tek dosya 500-800 arası bütün
   ağırlıkları taşıyor, bu yüzden ağırlık başına dosya yok. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/bricolage-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Türkçe ğ ş Ğ Ş bu alt kümede. Atlanamaz. */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 500 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/bricolage-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/karla-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url('../fonts/karla-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/*
 * --- Çapa gezinmesi ---
 *
 * Menüdeki "Hakkımızda", "Satranç Robotu", "Eğitmenler", "SSS" ve TRT
 * kartındaki başlık hep sayfa içi çapalara gidiyor. İki sorun vardı:
 *
 * 1. Sıçrama. Tarayıcı anında zıplıyordu; ziyaretçi nereye gittiğini
 *    göremiyordu. `scroll-behavior: smooth` bunu kaydırmaya çeviriyor.
 * 2. Başlığın altında kalma. Başlık `position: sticky`; çapa hedefi tam
 *    onun altına oturuyor ve bölümün ilk satırı görünmüyordu. Düzeltme
 *    aşağıdaki `scroll-margin-top` bloğunda ve artık ÖLÇÜLEN değerden
 *    hesaplanıyor — sabit yükseklik varsaymıyor.
 *
 * Hareket azaltma isteyen ziyaretçide kaydırma kapanır, konum düzeltmesi
 * kalır — o düzeltme süs değil, okunabilirlik.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * ÇAPA PAYI İKİ BİLİNMEYENDEN HESAPLANIYOR.
 *
 * Eski değer sabit bir eğriydi (`clamp(90px, 82px + 2vw, 110px)`) ve iki
 * ayrı sebeple yanlıştı:
 *
 * 1. EĞRİ TERSTİ. Genişlikle artıyordu; oysa başlık DAR ekranda satırını
 *    sarıp büyüyor. 390px'te başlık 124px'te bitiyorken pay 90px'ti ve
 *    bölümün etiketi 120px'e iniyordu — yani yapışkan başlığın ARKASINDA
 *    kalıyordu. Ölçüldü.
 * 2. BÖLÜMÜN KENDİ DOLGUSU SAYILMIYORDU. Hedef kutusu doğru yere iniyor ama
 *    ilk görünür içerik 98px'lik üst dolgunun altında başlıyordu: başlık
 *    84px'te biterken etiket 203px'e düşüyor, 119px ölü bant kalıyor ve
 *    bölümün altı ekran dışında bırakılıyordu. Kullanıcının "bir scroll daha
 *    aşağıda olsalar ortalayacaklar" dediği şey tam olarak buydu.
 *
 * Yeni hesap: içerik, başlığın bittiği yerin bir nefes altında başlasın.
 *
 *     pay = başlığın alt kenarı + nefes − bölümün kendi üst dolgusu
 *
 * `--rca-baslik-alt` çalışma anında `baslik.js` tarafından ölçülüp yazılıyor;
 * başlık yüksekliği içeriğe bağlı olduğu için (marka adı, menü, kullanıcı
 * adı, dil) tahmin edilemez — bir kez uzayınca düzen zaten kaymıştı (S39).
 * JS yoksa buradaki yedek değer devrede kalır.
 *
 * `--rca-bolum-ust` kök seviyesinde `0px`; yalnız `.rca-bolum` bölümleri onu
 * kendi dolgularıyla eziyor. Böylece dolgusuz hedefler (`#trt`, `#icerik`)
 * payın tamamını, dolgulu bölümler ise düşülmüş hâlini alıyor.
 *
 * `max()` payı sıfırın altına düşürmüyor. Taban bilerek `0`: bölümün üst
 * bölgesi yalnız dolgu, yani ekranın üstünde kalması hiçbir şey kaybettirmez
 * ama negatif pay tarayıcılar arasında tutarsız davranıyor. Daha yüksek bir
 * taban (16px denendi) masaüstünde hesabı ezip başlık altı boşluğu 27px yerine
 * 40px yapıyordu; mobilde 21px kalıyordu, yani iki uç ayrışıyordu.
 */
:root {
	/* Yedek: JS yüklenmezse dar ekranın sarılmış başlığını da örtecek kadar. */
	--rca-baslik-alt: 124px;
	--rca-capa-nefes: clamp(20px, 12px + 1.2vw, 32px);
	--rca-bolum-ust: 0px;
}

/* Liste bilerek açık yazıldı: `[id]` gibi geniş bir seçici LatePoint'in
   kendi kimlikli öğelerini de kapsar ve sihirbazın kendi kaydırmalarını
   sessizce kaydırırdı. */
#hakkimizda,
#egitmenler,
#robot,
#trt,
#seviye,
#sss,
#iletisim,
#giris,
#kayit,
#icerik {
	scroll-margin-top: max(
		0px,
		calc(var(--rca-baslik-alt) + var(--rca-capa-nefes) - var(--rca-bolum-ust))
	);
}

/*
 * BÖLÜM İÇİNDEKİ HEDEFLER DEĞİŞKENİ SIFIRLAR.
 *
 * Özel özellikler KALITIMLA iniyor. `#trt` bir `div` ve `.rca-robot`
 * bölümünün içinde duruyor; sıfırlanmazsa bölümün 94,5px'lik dolgusunu
 * kendi dolgusuymuş gibi düşüyor ve pay o kadar eksik kalıyor. Ölçüldü:
 * hedef başlığın 67px ARKASINA düşüyordu.
 *
 * `#icerik` sayfa kabuğunun `<main>` öğesi, `#giris` ve `#kayit` giriş/kayıt
 * sayfalarında; üçü de bölüm dolgusu taşımıyor.
 */
#trt,
#icerik,
#giris,
#kayit {
	--rca-bolum-ust: 0px;
}

/* "Anasayfa" maddesinin hedefi belgenin en başındaki sıfır yükseklikli
   işaret (header.php). Düzeltme payı yok: gidilecek yer 0. */
#top {
	display: block;
	height: 0;
	scroll-margin-top: 0;
}

/* Bilinçli iki genel kural — tasarımın kök kapsayıcısından ölçüldü:
   background: #FCF5EA; font-family: Karla, sans-serif */
body {
	margin: 0;
	/* Zemin lekelerinin (.rca-lekeler) hizalanacağı kapsayıcı. `position` sticky
	   başlığı bozmaz — bozan `overflow` kısıtıdır, o yüzden burada yok. */
	position: relative;
	background: var(--rca-zemin);
	font-family: var(--rca-font-govde);
}

/*
 * --- Zemindeki ışık lekeleri ---
 *
 * Tasarımın kök kapsayıcısında iki yavaş süzülen radyal leke var (sayfa.html
 * satır 12-14). Katmanın kendisi `overflow: hidden` taşıyor: lekeler kenardan
 * dışarı taşacak biçimde konumlandırılıyor ve buradan kırpılıyorlar, böylece
 * body'ye yatay taşma kısıtı koymaya gerek kalmıyor.
 */
.rca-lekeler {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.rca-leke {
	position: absolute;
	display: block;
	border-radius: 50%;
}

.rca-leke-1 {
	top: -180px;
	right: -140px;
	width: 760px;
	height: 760px;
	background: var(--rca-leke-seftali);
	animation: rca-suzul-1 26s ease-in-out infinite;
}

.rca-leke-2 {
	top: 900px;
	left: -220px;
	width: 680px;
	height: 680px;
	background: var(--rca-leke-yesil);
	animation: rca-suzul-2 32s ease-in-out infinite;
}

@keyframes rca-suzul-1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(40px, -30px) scale(1.08); }
}

@keyframes rca-suzul-2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-50px, 30px) scale(1.06); }
}

/* Hareket azaltma isteyen ziyaretçide lekeler durur; kendileri kalır. */
@media (prefers-reduced-motion: reduce) {
	.rca-leke {
		animation: none;
	}
}

/* İçerik lekelerin üstünde kalır. Başlık zaten konumlanmış ve z-index 50. */
.rca-kabuk main,
.rca-kabuk .rca-altbilgi,
.rca-kabuk .rca-eylem-cubugu {
	position: relative;
	z-index: 1;
}

/* Kalan tipografi kendi kabuğumuza kapsamlandı: bu biçemler LatePoint
   sihirbazının üstünde de yükleniyor ve oraya sızmamalı.
   overflow-x: hidden BİLEREK YOK — başlık position: sticky ve body'de
   overflow kısıtı sticky'yi sessizce bozuyor. Yatay taşma bölüm bazında
   kapatılıyor. */
.rca-kabuk {
	color: var(--rca-baslik);
	font-size: var(--rca-punto-govde);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Kapsamlanmış sıfırlama — yalnız bizim ağacımıza değer. */
.rca-kabuk *,
.rca-kabuk *::before,
.rca-kabuk *::after {
	box-sizing: border-box;
}

/*
 * Başlık ve paragraf sıfırlaması — `:where()` ÖZGÜLLÜK İÇİN ZORUNLU.
 *
 * Düz yazılınca `.rca-kabuk p` (0,1,1) tek sınıflı bileşen kurallarını
 * (0,1,0) eziyor ve sitedeki BÜTÜN bileşen boşlukları sessizce sıfırlanıyor:
 * bölüm etiketlerinin 20px altı, başlıkların 24-40px altı, paragrafların
 * 18px'i, SSS cevabının 0 26px 24px dolgusu — hepsi kayboluyordu. Anasayfa
 * tasarımdan 180px kısa çıkıyordu ve kural sayfada duruyordu; kaynağa bakan
 * göz "margin var" diyordu, hesaplanmış biçem "0px".
 *
 * `:where()` özgüllüğe hiç katkı vermez, yani bu kural (0,1,0) olur ve aynı
 * özgüllükteki bileşen kuralları — daha sonra yüklendikleri için — kazanır.
 * Aynı tuzağın bağlantı renginde tekrarı için yukarıdaki `a:not([class])`
 * açıklamasına bakın: MEKANİZMAYI DEĞİL SONUCU ÖLÇ.
 */
.rca-kabuk :where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin: 0;
	padding: 0;
}

.rca-kabuk :where(ul, ol) {
	list-style: none;
}

/*
 * Bağlantı rengi YALNIZ sınıfsız bağlantılara verilir.
 *
 * Neden `:not([class])`: `.rca-kabuk a` seçicisinin özgüllüğü (0,1,1),
 * `.rca-logotip` gibi tek sınıflı bileşen kurallarınınki (0,1,0). Yani düz
 * yazılınca temel kural bileşenlerin kendi rengini EZİYOR. Sitedeki bütün
 * düğmeler, logotip, menü maddeleri ve bölüm başlıkları birer `<a>` olduğu
 * için hepsi marka yeşiline dönüyordu — birincil düğme yeşil zemin üstünde
 * yeşil yazıya, yani okunamaz hâle geliyordu.
 *
 * `:not([class])` bileşenleri dışarıda bırakır; kural yalnız `the_content()`
 * içindeki sınıfsız metin bağlantılarına uygulanır ve orası zaten kastedilen
 * yerdi.
 *
 * Bu kusur ancak HESAPLANMIŞ biçem ölçülünce görüldü; kaynak okuyan
 * incelemeler kaçırdı. Mekanizmayı değil sonucu ölç.
 */
.rca-kabuk a:not([class]) {
	color: var(--rca-marka);
	text-decoration: none;
}

.rca-kabuk a:not([class]):hover {
	color: var(--rca-baslik);
}

/* Sınıflı bağlantılar da altı çizili gelmesin; renk bileşenin kendisinde. */
.rca-kabuk a[class] {
	text-decoration: none;
}

.rca-kabuk img,
.rca-kabuk video {
	max-width: 100%;
}

/* --- Kapsayıcı --- */
.rca-kapsayici {
	max-width: var(--rca-kapsayici);
	margin: 0 auto;
	padding-left: var(--rca-kenar);
	padding-right: var(--rca-kenar);
}

/* --- Tipografi --- */
/* Satır yüksekliği ve harf aralığı tasarımın iki artboard'unda FARKLI:
   masaüstü .96 / -.045em, mobil .98 / -.04em (spec.md §17 S11). Önce ikisinin
   ortası (.97) seçilmişti; anasayfanın masaüstünde tasarımla BİREBİR olması
   istendiği için masaüstü değerine çekildi. Mobildeki 0,02'lik fark 44px
   puntoda 0,9px eder. */
.rca-baslik-1 {
	font-family: var(--rca-font-baslik);
	font-weight: 800;
	font-size: var(--rca-punto-1);
	line-height: 0.96;
	letter-spacing: -0.045em;
	color: var(--rca-baslik);
}

.rca-baslik-2 {
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	font-size: var(--rca-punto-2);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--rca-baslik);
}

.rca-baslik-3 {
	font-family: var(--rca-font-baslik);
	font-weight: 600;
	font-size: var(--rca-punto-3);
	line-height: 1.25;
	color: var(--rca-baslik);
}

.rca-metin {
	font-family: var(--rca-font-govde);
	font-size: var(--rca-punto-govde);
	color: var(--rca-metin);
}

.rca-metin-sonuk {
	color: var(--rca-metin-3);
}

/* --- Düğmeler --- */
.rca-dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: var(--rca-yuvarlak);
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	/* Tasarım düğmelerde line-height belirtmiyor, yani `normal` kalıyor.
	   `1` yazmak düğmeleri 4px kısaltıyordu (TRT ve kapanış düğmelerinde
	   ölçüldü: 56 yerine 60, 59 yerine 63). */
	line-height: normal;
	cursor: pointer;
	text-decoration: none;
	transition: transform 120ms ease, background-color 120ms ease;
}

.rca-dugme:active {
	transform: translateY(1px);
}

.rca-dugme-birincil {
	background: var(--rca-marka);
	color: var(--rca-zemin);
	font-size: var(--rca-punto-dugme);
	padding: 19px 38px;
	box-shadow: var(--rca-golge-dugme);
}

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

.rca-dugme-cizgili {
	background: transparent;
	color: var(--rca-baslik);
	font-family: var(--rca-font-govde);
	font-weight: 600;
	font-size: var(--rca-punto-dugme-kucuk);
	padding: 11px 20px;
	border: 1.5px solid var(--rca-cizgi);
}

.rca-dugme-cizgili:hover {
	border-color: var(--rca-cizgi-koyu);
	color: var(--rca-baslik);
}

.rca-dugme-yalin {
	background: transparent;
	color: var(--rca-metin-4);
	font-family: var(--rca-font-govde);
	font-weight: 400;
	font-size: var(--rca-punto-dugme-kucuk);
	padding: 13px 6px;
}

/* Yalnız ekran okuyucuya görünen metin. */
.rca-gizli {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Atlama bağlantısı klavyeyle odaklanınca görünür olmalı: yalnız ekran
   okuyucuya değil, Tab ile gezen görebilen kullanıcıya da lazım. */
.rca-gizli:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	z-index: 100;
	background: var(--rca-yuzey);
	color: var(--rca-baslik);
	border-radius: var(--rca-yuvarlak);
	box-shadow: var(--rca-golge-menu);
}