/*
 * Tasarım sistemi — tek doğruluk kaynağı.
 *
 * Renk ve punto başka hiçbir dosyada ham yazılmaz. Değerler
 * tasarim/yon5-v2-oyun-bahcesi/sayfa.html içinden ölçülerek alındı;
 * ölçümler tasarim/yon5-v2-oyun-bahcesi/NOTLAR.md dosyasında.
 */

:root {
	/* --- Renk --- */
	--rca-zemin:       #FCF5EA;  /* sayfa zemini, sıcak krem */
	--rca-yuzey:       #FFFDF9;  /* kart ve panel */
	--rca-marka:       #1F7A5C;  /* birincil düğme, vurgu */
	--rca-marka-koyu:  #1F6E54;  /* açık zemin üstünde yeşil metin */
	--rca-baslik:      #2B211A;  /* başlık kahvesi */
	--rca-metin:       #5A4A3D;  /* gövde metni */
	--rca-metin-2:     #6B5A4D;  /* ikincil metin */
	--rca-metin-3:     #8A7969;  /* üçüncül metin, etiket */
	--rca-metin-4:     #4A3B30;  /* başlıktaki bağlantılar */
	--rca-vurgu:       #F6DCC4;  /* şerit, rozet */
	--rca-cizgi:       rgba(43, 33, 26, 0.25);  /* çizgili düğme kenarı — --rca-baslik'in saydamı */
	--rca-cizgi-koyu:  rgba(43, 33, 26, 0.55);  /* aynı kenar, üzerine gelince */
	--rca-cizgi-acik:  rgba(43, 33, 26, 0.20);  /* hesap düğmesi kenarı — --rca-baslik'in saydamı */
	--rca-cizgi-ince:  rgba(43, 33, 26, 0.10);  /* menü kenarı ve ayraç — --rca-baslik'in saydamı */
	--rca-cizgi-ayrac: rgba(43, 33, 26, 0.12);  /* TRT kartındaki dikey ayraç çizgisi */
	--rca-zemin-yapiskan: rgba(252, 245, 234, 0.92);  /* mobil eylem çubuğunun zemini — --rca-zemin'in saydamı */
	--rca-cekmece-orten:  rgba(43, 33, 26, 0.45);  /* mobil çekmecenin arkasındaki karartma — --rca-baslik'in saydamı */
	--rca-baslik-hap-zemin: rgba(252, 245, 234, 0.88);  /* başlık kapsülünün zemini; tasarımda .88, eylem çubuğununkinden ayrı ölçüldü */
	--rca-metin-video: rgba(252, 245, 234, 0.92);  /* video üstü metin — --rca-zemin-yapiskan ile aynı değeri paylaşır ama anlamca farklıdır, karıştırılmaz */
	--rca-cizgi-kart:  rgba(43, 33, 26, 0.09);  /* bölüm kartlarının kenarı */
	--rca-hap-zemin:   rgba(43, 33, 26, 0.05);  /* robot bölümündeki hap etiketlerin zemini */
	--rca-yer-tutucu-kenar: rgba(43, 33, 26, 0.12);  /* fotoğraf yer tutucularının kenarı */
	/* Form alanları — kimlik ekranları ve LatePoint'in kendi giriş formu. */
	--rca-girdi-kenar:      rgba(43, 33, 26, 0.14);
	--rca-girdi-kenar-odak: var(--rca-marka);
	/* Uyarı rengi. Palette kırmızı yok; kremin ve yeşilin yanında durabilen
	   sıcak bir kiremit seçildi — saf kırmızı bu zeminde çiğ kalıyor. */
	--rca-uyari:       #A8412C;
	--rca-uyari-zemin: rgba(168, 65, 44, 0.08);
	--rca-uyari-kenar: rgba(168, 65, 44, 0.28);
	/* Koyu ve yeşil zemin üstündeki metinler — kapanış kartı ve "İleri"
	   seviye kartı kremin farklı opaklıklarını kullanıyor. */
	--rca-metin-koyu:  rgba(252, 245, 234, 0.72);  /* koyu kart üstünde iletişim metni */
	--rca-etiket-koyu: rgba(252, 245, 234, 0.45);  /* koyu kart üstünde ADRES/TELEFON etiketi */
	--rca-metin-yesil: rgba(252, 245, 234, 0.85);  /* yeşil kart üstünde paragraf */
	--rca-rozet-yesil: rgba(252, 245, 234, 0.18);  /* yeşil kart üstünde numara rozeti */

	/* --- Eğitmen paneli: onaylanan A yönü --- */
	--rca-egitmen-orman:      #1F4939;
	--rca-egitmen-altin:      #F0BD50;
	--rca-egitmen-altin-acik: #F5D980;
	--rca-egitmen-zemin:      #FBF6EC;
	--rca-egitmen-kart:       #FFFFFF;
	--rca-egitmen-cizgi:      #E9DFCB;
	--rca-egitmen-onay:       #244F3D;
	--rca-egitmen-ret-zemin:  #EEE7DA;
	--rca-egitmen-ret-metin:  #7B5144;
	--rca-egitmen-ders-zemin: #E8EFE8;

	/* --- Yönetici paneli: onaylanan A yönü (spec §23.3) --- */
	/*
	 * TERS VURGU ÇİFTİ. Eğitmende koyu YEŞİL menü + ALTIN vurgu; yöneticide
	 * ESPRESSO menü + YEŞİL vurgu. İki panel bir bakışta ayrılsın diye seçildi
	 * ve iki renk de sitede zaten var: espresso `--rca-baslik`in, yeşil
	 * `--rca-marka`nın değeri. Yeni bir renk ailesi AÇILMADI.
	 *
	 * DURUM RENKLERİ BURADA YOK ve olmayacak. Bekleyen/onaylı/iptal renkleri
	 * eğitmen panelinden aynen devralınıyor (--rca-egitmen-altin,
	 * --rca-egitmen-onay, --rca-uyari). Aynı veriye iki panelde iki farklı
	 * renk vermek, aynı işi yapan iki kişinin birbirini yanlış anlaması
	 * demektir. Ayrım menüde kurulur, veri renginde değil.
	 */
	--rca-yonetim-espresso:     #2B211A;  /* yan menü zemini — --rca-baslik ile aynı değer */
	--rca-yonetim-espresso-2:   #3A2C23;  /* menü hover ve ayraç */
	--rca-yonetim-vurgu:        #1F7A5C;  /* aktif madde, birincil düğme — --rca-marka ile aynı değer */
	--rca-yonetim-vurgu-acik:   #2E9070;  /* üzerine gelince */
	--rca-yonetim-zemin:        #FCF5EA;  /* içerik zemini — --rca-zemin ile aynı değer */
	--rca-yonetim-kart:         #FFFDF9;  /* kart yüzeyi — --rca-yuzey ile aynı değer */
	--rca-yonetim-cizgi:        rgba(43, 33, 26, 0.12);      /* kart ve tablo kenarı */
	--rca-yonetim-menu-metin:   rgba(252, 245, 234, 0.72);   /* koyu menüde pasif madde */
	--rca-yonetim-menu-metin-2: rgba(252, 245, 234, 0.45);   /* menü bölüm etiketi */
	--rca-yonetim-tablo-serit:  rgba(43, 33, 26, 0.03);      /* tablo satır şeridi */

	/* --- Tipografi --- */
	--rca-font-baslik: 'Bricolage Grotesque', system-ui, sans-serif;
	--rca-font-govde:  'Karla', system-ui, sans-serif;

	/*
	 * Akıcı punto ölçeği.
	 *
	 * Tasarımda @media SIFIR; masaüstü ve mobil AYRI DOM ağacı olarak
	 * çizilmiş. clamp() iki artboard'un değerleri arasında sürekli geçiş
	 * kurar, böylece 768-1023px arası "tasarlanmamış" aralıkta sıçrama
	 * olmaz. Alt sınır mobil (390px) değeri, üst sınır masaüstü (1300px)
	 * değeridir; ortadaki vw katsayısı ikisinden türetilir.
	 */

	/*
	 * 1. kademe YALNIZ kahraman başlığıdır — tasarımın iki artboard'unda da
	 * bu ölçüde tek bir öğe var (44px mobil satır 521, 88px masaüstü satır
	 * 257) ve o öğe `<h1>Her hamle bir öğrenme`. Alt sayfaların semantik
	 * `<h1>`'i tasarım gereği 2. kademe punto kullanır (index.php, page.php);
	 * bölüm başlıkları `<h2>` olduğu için 2. kademededir. Yeni bir bölüm bu
	 * token'ı kullanmak isterse önce tasarımda karşılığı olup olmadığına
	 * bakılır — token kahramana kalibre edilmiştir.
	 *
	 * Katsayılar uçlarda tam değeri vermek için bilerek yukarı yuvarlandı:
	 * 390px'de orta terim 43,91px (alt sınıra kırpılır → 44px), 1300px'de
	 * 88,50px (üst sınıra kırpılır → 88px).
	 */
	--rca-punto-1:  clamp(2.75rem, 1.55rem + 4.90vw, 5.50rem);
	/*
	 * 2. ve 3. kademe de --rca-punto-1 ile aynı kökten kalibre edildi: Görev
	 * 2'de tahminle konmuşlardı ve tasarıma karşı ölçülmemişlerdi (28-48px ve
	 * 20-28px veriyorlardı).
	 *
	 * Ölçüm: masaüstü ağacında `<h2>` 50-54px arası değişiyor (hakkımızda ve
	 * robot 50, eğitmenler/seviyeler/SSS 52, kapanış 54), mobilde 29-30px.
	 * Tek token hepsini birebir tutturamaz; en sık geçen değer olan 52px üst
	 * sınır seçildi, ±2px fark sapma kaydına yazıldı (spec.md §17).
	 * `<h3>` yalnız masaüstü ağacında var: 26px (sınıfta/online) ve 30px
	 * (başlangıç/orta/ileri); üst sınır 30px.
	 */
	--rca-punto-2:  clamp(1.875rem, 1.286rem + 2.418vw, 3.25rem);
	/* Tasarımda iki `<h2>` ölçüsü var ve tek token ikisini birden tutturamaz:
	   eğitmenler/seviyeler/SSS 52px (yukarıdaki token), hakkımızda ve robot
	   50px. İkinci ölçü kendi token'ını aldı — 2px fark 50px puntoda göze
	   çarpıyor ve anasayfa tasarımla birebir olmak zorunda. Mobil ucu iki
	   token'da da 29-30px. */
	--rca-punto-2-kucuk: clamp(1.8125rem, 1.246rem + 2.33vw, 3.125rem);  /* 29 → 50px */
	--rca-punto-3:  clamp(1.1875rem, 0.893rem + 1.209vw, 1.875rem);  /* 19 → 30px · seviye kartı başlıkları */
	--rca-punto-govde: clamp(1.00rem, 0.95rem + 0.20vw, 1.125rem);
	--rca-punto-kucuk: 0.875rem;
	--rca-punto-dugme:       1.125rem;   /* birincil düğme */
	--rca-punto-dugme-kucuk: 0.9375rem;  /* çizgili ve yalın düğme */
	--rca-punto-logotip: 1.125rem;   /* 18px · başlıktaki marka adı */
	/*
	 * Marka adının 900px altındaki puntosu. ÖLÇÜMDEN GELİYOR, tahminden
	 * değil: 390px'te kapsülün iç genişliği 320px, sağdaki 44px'lik düğme ve
	 * 12px boşlukla birlikte marka için 264px kalıyor. Ad 18px'te logotipi
	 * 257,7px'e çıkarıp geriye 2,8px pay bırakıyordu — bu kadar ince bir pay
	 * yazı tipi geç geldiğinde ya da Android'in yazı ölçeği açıkken sarmaya
	 * dönüşür. 17px'te logotip 245,7px, pay 18,3px.
	 */
	--rca-punto-logotip-mobil: 1.0625rem;  /* 17px */
	/* 390px'in ALTINDA ikinci bir kademe gerekiyor. Ölçüldü: 375px'te (iPhone
	   SE 2/3) 17px puntoda pay 3,3px'e, 360px'te −11,7px'e düşüyor — yani
	   sarıyor. 16px punto ve sıkışan dolgularla 360px'te pay 19,3px oluyor. */
	--rca-punto-logotip-dar: 1rem;  /* 16px */
	--rca-punto-avatar:        0.875rem;   /* 14px · baş harf avatarı */
	--rca-punto-rol:           0.6875rem;  /* 11px · çekmecedeki rol ve bölüm etiketi */
	--rca-punto-tetik-etiket:  0.53125rem; /* 8.5px · hamburger düğmesinin "Menü" etiketi */
	--rca-punto-menu:    0.875rem;   /* 14px · menü maddeleri ve hesap menüsü */
	/* Rozet puntosu iki artboard'da farklı: 390px'de 12px, 1300px'de 13.5px.
	   punto-1 ile aynı yöntemle her iki uçta da tam değeri vermek için
	   katsayı bilerek dik seçildi (390px'de 11,78px → alta kırpılır,
	   1300px'de 13,6px → üste kırpılır). */
	--rca-punto-rozet: clamp(0.75rem, 0.6875rem + 0.20vw, 0.84375rem); /* kahraman bölümündeki konum rozeti */
	/* Kahraman alt metni yalnız masaüstü ağacında var (19px); mobil ağaçta
	   bu paragraf hiç yok (spec.md §17 S9), bu yüzden tek sabit değer —
	   köprülenecek ikinci bir uç yok. */
	--rca-punto-kahraman-alt: 1.1875rem;
	/* TRT kartı etiketi ("TELEVİZYONDA") — 390px'de 10.5px, 1300px'de 11px;
	   aynı dik-katsayı yöntemi. */
	--rca-punto-trt-etiket: clamp(0.65625rem, 0.61875rem + 0.10vw, 0.6875rem);
	/* TRT kartı başlığı — 390px'de 17px, 1300px'de 19px. */
	--rca-punto-trt-baslik: clamp(1.0625rem, 0.96875rem + 0.30vw, 1.1875rem);
	/* Robot bölümündeki videonun altındaki künye satırı. Mobil ağaçta aynı
	   satır tek parça ve 13px; masaüstünde iki ayrı punto var. */
	--rca-punto-altyazi:       clamp(0.8125rem, 0.758rem + 0.22vw, 0.9375rem);   /* 13 → 15px */
	--rca-punto-altyazi-sonuk: clamp(0.8125rem, 0.797rem + 0.055vw, 0.84375rem); /* 13 → 13.5px */
	/* Mobil alt eylem çubuğunun "İlk ders ücretsiz" etiketi — 11.5px, tek
	   değer. Tasarımın bu şeridi yalnız mobil ağaçta var (masaüstü karşılığı
	   yok), bu yüzden köprülenecek ikinci bir uç yok; clamp() gerekmiyor. */
	--rca-punto-eylem-etiket: 0.71875rem;

	/*
	 * Vitrin bölümlerinin puntoları — hepsi iki artboard'dan köprülendi.
	 * Soldaki değer mobil (390px), sağdaki masaüstü (1300px) ölçümüdür.
	 */
	--rca-punto-etiket:        clamp(0.6875rem, 0.634rem + 0.22vw, 0.8125rem);    /* 11 → 13px · bölüm üst etiketi */
	--rca-punto-govde-buyuk:   clamp(0.9375rem, 0.871rem + 0.275vw, 1.09375rem);  /* 15 → 17.5px · bölüm paragrafı */
	--rca-punto-yer-tutucu:    clamp(0.625rem, 0.598rem + 0.11vw, 0.6875rem);     /* 10 → 11px · FOTOĞRAF yazısı */
	--rca-punto-kart-baslik:   clamp(1.0625rem, 0.982rem + 0.33vw, 1.25rem);      /* 17 → 20px · fayda kartı başlığı */
	--rca-punto-kart-metin:    clamp(0.84375rem, 0.817rem + 0.11vw, 0.90625rem);  /* 13.5 → 14.5px · fayda kartı metni */
	--rca-punto-egitmen-ad:    clamp(1.125rem, 1.045rem + 0.33vw, 1.3125rem);     /* 18 → 21px */
	--rca-punto-egitmen-unvan: clamp(0.8125rem, 0.786rem + 0.11vw, 0.875rem);     /* 13 → 14px */
	--rca-punto-hap:           clamp(0.8125rem, 0.772rem + 0.165vw, 0.90625rem);  /* 13 → 14.5px · robot hapları */
	--rca-punto-seviye-metin:  clamp(0.84375rem, 0.777rem + 0.275vw, 1rem);      /* 13.5 → 16px · seviye kartı metni */
	--rca-punto-numara:        clamp(0.9375rem, 0.855rem + 0.33vw, 1.125rem);    /* 15 → 18px · seviye numarası */
	--rca-punto-yer-baslik:    clamp(1.0625rem, 0.821rem + 0.989vw, 1.625rem);   /* 17 → 26px · Sınıfta / Online */
	--rca-punto-yer-metin:     clamp(0.84375rem, 0.79rem + 0.22vw, 0.96875rem);  /* 13.5 → 15.5px */
	--rca-punto-sss-soru:      clamp(0.96875rem, 0.875rem + 0.385vw, 1.1875rem); /* 15.5 → 19px */
	--rca-punto-kapanis:       clamp(1.875rem, 1.232rem + 2.637vw, 3.375rem);    /* 30 → 54px · kapanış başlığı */
	--rca-punto-iletisim:      clamp(0.78125rem, 0.741rem + 0.165vw, 0.875rem);  /* 12.5 → 14px */
	--rca-punto-iletisim-etiket: clamp(0.59375rem, 0.567rem + 0.11vw, 0.65625rem); /* 9.5 → 10.5px */

	/* --- Boşluk --- */
	--rca-bosluk-bolum: clamp(3.5rem, 2.0rem + 6.2vw, 6.875rem);
	--rca-kenar:        clamp(1.125rem, 0.6rem + 2.2vw, 1.75rem);
	--rca-kapsayici:    1300px;

	/* --- Diğer --- */
	--rca-yuvarlak:      999px;   /* hap düğmeler */
	--rca-yuvarlak-kart: 20px;
	--rca-golge-dugme:   0 10px 26px rgba(31, 122, 92, 0.28);
	--rca-golge-menu:    0 14px 34px rgba(43, 33, 26, 0.14);  /* açılır hesap menüsü */
	--rca-golge-baslik-hap: 0 10px 30px rgba(43, 33, 26, 0.06);  /* yüzen başlık kapsülü */
	--rca-golge-oynat-kucuk: 0 6px 16px rgba(31, 122, 92, 0.35);  /* TRT küçük resmindeki oynat dairesi */
	--rca-odak-halka:    0 0 0 3px rgba(31, 122, 92, 0.18);  /* form alanlarının odak halkası */
	--rca-golge-kutu:    0 30px 80px rgba(43, 33, 26, 0.45);  /* video ışık kutusu */
	/* Üzerine gelinen eğitmen kartı. Tasarımda böyle bir durum yok — kart
	   tıklanabilir hale 2026-08-19'da geldi. Değer TRT kartının gölgesinden
	   (0 24px 60px / .14) türetildi: aynı aile, daha kısa mesafe. */
	--rca-golge-kart-ust: 0 10px 26px rgba(43, 33, 26, 0.12);
	/* Kahraman başlığının metin gölgesi — masaüstü değeri. Mobilde
	   0 2px 20px rgba(43,33,26,.4) ölçüldü; blur ve alfa farkı gözle ayırt
	   edilemeyecek kadar küçük, tek token iki ağaca da uygulanıyor
	   (spec.md §17). */
	--rca-golge-baslik: 0 2px 30px rgba(43, 33, 26, 0.35);
	/* Kahraman alt metninin gölgesi — bkz. --rca-punto-kahraman-alt,
	   yalnız masaüstü ağacında var. */
	--rca-golge-metin: 0 1px 18px rgba(43, 33, 26, 0.4);
	/* TRT kartının gölgesi — masaüstü değeri. Mobilde
	   0 16px 36px rgba(43,33,26,.14) ölçüldü (aynı alfa, farklı yayılma);
	   tek token iki ağaca da uygulanıyor (spec.md §17). */
	--rca-golge-trt-kart: 0 24px 60px rgba(43, 33, 26, 0.14);
	/* TRT küçük resim yer tutucusunun kenarlığı — mevcut --rca-cizgi
	   ölçeğindeki hiçbir değer (.10 / .20) yeterince yakın değil. */
	--rca-trt-yer-tutucu-kenar: rgba(43, 33, 26, 0.14);
	/* TRT küçük resim yer tutucusunun çizgili deseni — yüksek çözünürlüklü
	   TRT videosu müşteriden bekleniyor (spec §18); gelene kadar tasarımın
	   kendi yer tutucusu aynen kullanılıyor. */
	--rca-trt-yer-tutucu-desen: repeating-linear-gradient(135deg, rgba(43, 33, 26, 0.10) 0 10px, rgba(43, 33, 26, 0) 10px 20px);
	/* Kahraman videosunun üstündeki karartma geçişi — masaüstü durakları.
	   Mobilde duraklar ≤0.02 alfa farkla ölçüldü (spec.md §17); tek token
	   iki ağaca da uygulanıyor. */
	--rca-kahraman-perde: linear-gradient(180deg, rgba(43, 33, 26, 0.34) 0%, rgba(43, 33, 26, 0.04) 30%, rgba(43, 33, 26, 0.30) 62%, rgba(43, 33, 26, 0.72) 100%);
	/* Mobil alt eylem çubuğunun kartı — tasarımda ölçülen gölge, mevcut
	   ölçekteki hiçbir --rca-golge-* değeriyle uyuşmuyor (alfa .08, hiçbiri
	   bu kadar düşük değil); yeni token açıldı. Yön negatif: çubuk sayfanın
	   altına sabit, gölge yukarı doğru düşüyor. */
	--rca-golge-eylem-cubugu: 0 -6px 24px rgba(43, 33, 26, 0.08);
	/* Robot bölümünün büyük kartı — çok yumuşak, geniş bir gölge. */
	--rca-golge-robot: 0 20px 50px rgba(43, 33, 26, 0.05);
	/* Fotoğraf yer tutucularının çizgili deseni (hakkımızda görseli ve
	   eğitmen daireleri). Gerçek fotoğraflar müşteriden bekleniyor (§18);
	   gelene kadar tasarımın kendi yer tutucusu aynen kullanılıyor.
	   TRT küçük resmininki daha koyu (.10) ve ayrı token'dır. */
	--rca-yer-tutucu-desen: repeating-linear-gradient(135deg, rgba(43, 33, 26, 0.08) 0 10px, rgba(43, 33, 26, 0) 10px 20px);

	/* Sayfa zeminindeki iki ışık lekesi (header.php). Tasarımın kök
	   kapsayıcısında aynen var; şeftali olan sağ üstte, yeşil olan solda. */
	--rca-leke-seftali: radial-gradient(circle, rgba(246, 220, 196, 0.9), rgba(252, 245, 234, 0) 70%);
	--rca-leke-yesil:   radial-gradient(circle, rgba(31, 122, 92, 0.10), rgba(252, 245, 234, 0) 70%);
}
