/*
 * Başlık çubuğu, hesap menüsü ve alt bilgi.
 *
 * Ölçüler tasarim/yon5-v2-oyun-bahcesi/sayfa.html masaüstü ağacından alındı.
 */

/*
 * Başlık YÜZEN BİR KAPSÜLDÜR, tam genişlik bar değil.
 *
 * Tasarımda (sayfa.html satır 16-17) yapışkan olan dış kutu SAYDAM ve yalnız
 * dolgu taşır; zemin, kenarlık, gölge ve yuvarlaklık içteki kapsülde. Kapsül
 * kenardan --rca-kenar kadar içeride durur ve sayfa kaydıkça içerik altından
 * geçer.
 *
 * `overflow-x: hidden` BİLEREK YOK — bu çubuk `position: sticky` ve üstündeki
 * herhangi bir overflow kısıtı yapışkanlığı sessizce bozar (temel.css).
 */
.rca-baslik-cubugu {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 14px var(--rca-kenar) 0;
}

/*
 * Başlık satırı sığmadığında SARILIR, taşmaz.
 *
 * Yeni bir kırılma noktası açılmadı: `flex-wrap` yalnız içerik gerçekten
 * sığmadığı genişlikte devreye girer, sığdığı her genişlikte tek satır aynen
 * korunur (§7'deki tek yapısal kırılma noktası kuralı bozulmuyor). Sarılma
 * sırası bilinçli: önce menü kendi içinde (aşağıda `flex: 1 1 auto`), sonra
 * eylem grubu alt satıra iner, en son eylemler kendi içinde sarılır.
 */
.rca-baslik-hap {
	max-width: var(--rca-kapsayici);
	margin: 0 auto;
	background: var(--rca-baslik-hap-zemin);
	backdrop-filter: blur(12px);
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 22px;
	box-shadow: var(--rca-golge-baslik-hap);
	padding: 12px 14px 12px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

/* Logotip artık iki parçalı: yeşil kare işaret + marka adı. */
.rca-logotip {
	flex: none;
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--rca-font-baslik);
	font-weight: 800;
	font-size: var(--rca-punto-logotip);
	line-height: normal;
	letter-spacing: -0.02em;
	color: var(--rca-baslik);
	white-space: nowrap;
}

.rca-logotip:hover {
	color: var(--rca-marka);
}

/*
 * MARKANIN KENDİ İŞARETİ (2026-08-19).
 *
 * Önceki hâli tasarımdan gelen bir yer tutucuydu: yeşil yuvarlak kare ve
 * içinde krem bir kare (`::after`). Logo geldiği için ikisi de kalktı —
 * `<img>` değiştirilmiş öğe olduğundan `::after` zaten çizilmezdi, yani
 * kural sessizce ölü koda dönüşecekti.
 *
 * Zemin verilmiyor: PNG saydam ve krem sayfa zemininin üstünde duruyor.
 */
.rca-logotip-isaret {
	flex: none;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/*
 * Menü kalan boşluğu kaplar ve maddeleri ORTALAR — tasarımda da ortalı.
 * `flex: 1 1 auto` sayesinde daralınca ilk sıkışan menü olur, eylem düğmeleri
 * değil.
 */
.rca-menu {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 13px;
}

.rca-menu-madde {
	font-size: var(--rca-punto-menu);
	line-height: normal;
	color: var(--rca-metin-2);
	white-space: nowrap;
}

.rca-menu-madde:hover {
	color: var(--rca-marka);
}

/*
 * DAR MASAÜSTÜ ŞERİDİ — 901-960px.
 *
 * Marka adı 12 karakterden 21 karaktere uzayınca (Görev 34) logotip
 * 156,5px'ten 243,2px'e çıktı (+86,7).
 * Ölçüldü: 902px'te kapsül 69,6px'ten 109,6px'e, yani iki satıra düşüyordu.
 * Kapsül taşmıyor — sarılmak zaten bilinçli davranış (yukarıdaki açıklama) —
 * ama yapışkan başlığın 40px uzaması dar bir şeritte görünür bir gerileme.
 *
 * ŞERİT ÖLÇÜLDÜ, TAHMİN EDİLMEDİ: 902px iki satır, 960px tek satır, 1024px
 * tek satır. Bu yüzden kural yalnız iki uç arasında çalışıyor; 900px altında
 * menü zaten gizli (aşağıdaki blok) ve logotip tam puntoda kalıyor.
 *
 * Gereken yer 52,6px; buradan 68,7px kazanılıyor — logotip puntosu,
 * kapsül sol dolgusu ve üç boşluk değeri. Yapısal bir kırılma noktası
 * DEĞİL: hiçbir öğe görünürlük değiştirmiyor, yalnız ölçüler sıkışıyor
 * (spec §17 sapma S39).
 */
@media (min-width: 901px) and (max-width: 960px) {
	.rca-baslik-hap {
		padding-left: 16px;
		gap: 10px 14px;
	}

	.rca-logotip {
		font-size: 15px;
		gap: 8px;
	}

	.rca-menu {
		gap: 8px 10px;
	}
}

/* TR/EN anahtarının biçemi 2026-08-14'te kaldırıldı; anahtarın kendisi de
   header.php'den çıktı (gerekçe orada). `--rca-dil-zemin`, `--rca-punto-dil`
   ve `--rca-golge-dil` token'ları da artık kullanılmadığı için silindi. */

/*
 * BAŞLIK ÇUBUĞUNUN YÜKSEKLİĞİ OTURUM DURUMUYLA DEĞİŞMEZ.
 *
 * Bu grup misafirde "Giriş Yap + Kayıt Ol", girişli velide hesap açılır
 * menüsünü taşıyor. Tasarımda çubuğun yüksekliğini belirleyen en uzun öğe
 * bu gruptaki "Giriş Yap"; hesap düğmesi daha kısa olduğu için ölçü
 * verilmeseydi giriş yapan veli kapsülü 3,6px kısalmış görüyordu (ölçüldü).
 *
 * DEĞER 44px, 43 DEĞİL (2026-08-14). TR/EN anahtarı kaldırılınca kapsülün
 * yüksekliği misafirde 70px, girişli velide 69px ölçüldü: anahtar iki
 * durumda da 44px yer kaplayıp farkı gizliyormuş. "Giriş Yap" bağlantısı
 * 44px, hesap düğmesi 43px; ölçü ona göre yükseltildi. 1px küçük bir fark
 * ama kahraman bölümü başlığın yüksekliğine göre yukarı çekiliyor, yani
 * bütün sayfa oturum durumuna göre 1px kayıyordu.
 */
.rca-baslik-eylemler {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	min-height: 44px;
}

/*
 * Giriş Yap + Kayıt Ol grubu. 900px altında bu grup TAMAMEN gizlenir
 * (aşağıdaki kırılma noktası bloğu) — tasarımın kendi mobil başlığında da
 * yoklar (spec.md §17 S18). Aynı iki bağlantı footer.php'nin bastığı
 * .rca-eylem-cubugu'da geri gelir. Kendi gap/flex-wrap'i var ki grup
 * .rca-baslik-eylemler'in tek bir öğesi olsa da içindeki iki düğme
 * gerektiğinde kendi aralarında sarılabilsin — üst grubun ≥900px
 * davranışı bu sarmalla değişmedi (bkz. spec.md §17 S12 ölçümleri).
 */
.rca-baslik-misafir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/* Düğme metni kelimeden bölünmez: grup sığmıyorsa düğme bütün olarak alt
   satıra iner. Bölünme 390 px'te iki satırlık, farklı yükseklikte düğmeler
   üretiyordu. */
.rca-baslik-eylemler .rca-dugme {
	white-space: nowrap;
}

/* Küçük birincil düğme varyantı — mobil alt eylem çubuğundaki (footer.php)
   Kayıt Ol kullanıyor. Başlıkta artık kullanılmıyor: tasarımın başlığında
   "Randevu Al" yok, o düğme TRT kartının içinde. */
.rca-dugme-kucuk {
	font-size: var(--rca-punto-dugme-kucuk);
	padding: 12px 22px;
	box-shadow: none;
}

/* --- Hesap menüsü --- */
.rca-hesap {
	position: relative;
}

.rca-hesap-dugme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1.5px solid var(--rca-cizgi-acik);
	border-radius: var(--rca-yuvarlak);
	/* Yerini aldığı "Kayıt Ol" ile aynı dikey ritim. */
	padding: 11px 18px;
	font-family: var(--rca-font-govde);
	/* Yerini aldığı "Kayıt Ol" düğmesiyle aynı punto — menü maddesi
	   puntosundan (14px) bilerek farklı. */
	font-size: var(--rca-punto-dugme-kucuk);
	font-weight: 600;
	line-height: normal;
	color: var(--rca-baslik);
	cursor: pointer;
}

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

.rca-hesap-ad {
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rca-hesap-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	display: flex;
	flex-direction: column;
	padding: 8px;
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 16px;
	box-shadow: var(--rca-golge-menu);
}

.rca-hesap-menu[hidden] {
	display: none;
}

.rca-hesap-madde {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: var(--rca-punto-menu);
	color: var(--rca-metin-4);
}

.rca-hesap-madde:hover {
	background: var(--rca-zemin);
	color: var(--rca-baslik);
}

.rca-hesap-ayrac {
	display: block;
	height: 1px;
	margin: 6px 4px;
	background: var(--rca-cizgi-ince);
}

/*
 * --- Mobil tetikleyici ve çekmece ---
 *
 * BU BLOK 900px KIRILMA NOKTASINDAN ÖNCE DURMALI. Aşağıdaki `display: none`
 * kuralları ile media query içindeki görünürlük kurallarının özgüllüğü eşit
 * (0,1,0); eşit özgüllükte SONRAKİ kural kazanır. Taban kurallar media
 * query'den sonra yazılsaydı `display: none` her genişlikte kazanırdı —
 * aynı hata `.rca-eylem-cubugu`'nda bir kez yapılmış ve ölçülerek yakalanmıştı.
 */

/*
 * Tetikleyici tam 44px. `.rca-baslik-eylemler`in `min-height: 44px` ölçüsüyle
 * aynı olması gerekiyor: kapsülün yüksekliği bu grubun en uzun öğesine bağlı
 * ve başlığın oturum durumundan bağımsız 70px kalması buna dayanıyor.
 *
 * `padding: 0` gerekli — tarayıcının <button> varsayılanı 1px 6px ve onunla
 * düğme 44px yerine 56px oluyor, kapsül de sarmaya bir adım yaklaşıyordu.
 */
.rca-mobil-tetik {
	display: none;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: transparent;
	border: 1.5px solid var(--rca-cizgi-acik);
	border-radius: 13px;
	cursor: pointer;
}

.rca-mobil-tetik:hover {
	border-color: var(--rca-cizgi-koyu);
}

/* Avatarlı hâlde kenarlığı halka taşıyor; düğmenin kendi kare kenarlığı
   kalkıyor. Sınıf PHP'den geliyor, `:has()` ile değil — destek boşluğunda
   dairenin etrafında kare bir çerçeve kalırdı. */
.rca-mobil-tetik-avatar {
	border: 0;
}

/*
 * Hamburger çizgileri tek öğeden çiziliyor: ortadaki bir arka plan katmanı,
 * alttaki ve üstteki `::before`/`::after`. Üç ayrı <span> basmak işaretlemede
 * hiçbir şey anlatmıyordu.
 *
 * ÖĞENİN KENDİ YÜKSEKLİĞİ ÜÇ ÇİZGİYİ BİRDEN KAPSAR (13px), tek çizgiyi değil.
 * Önceki hâlde yükseklik 1,8px'ti ve dıştaki iki çizgi `position: absolute`
 * ile ±5,8px'e itiliyordu — mutlak konumlanan sözde öğeler düzende yer
 * kaplamadığı için flex kutusu yalnız ortadaki çizgiyi ölçüyor, altındaki
 * "Menü" etiketi alt çizginin üstüne biniyordu.
 */
.rca-tetik-cizgiler {
	position: relative;
	display: block;
	width: 17px;
	height: 13px;
	background: linear-gradient(var(--rca-baslik), var(--rca-baslik)) center center / 17px 1.8px no-repeat;
}

.rca-tetik-cizgiler::before,
.rca-tetik-cizgiler::after {
	content: "";
	position: absolute;
	left: 0;
	width: 17px;
	height: 1.8px;
	border-radius: 2px;
	background: var(--rca-baslik);
}

.rca-tetik-cizgiler::before { top: 0; }
.rca-tetik-cizgiler::after  { bottom: 0; }

/* İkon tek başına bırakılmadı: NN/g ölçümünde etiketsiz hamburger tetikleyici
   belirgin biçimde daha az bulunuyor. `line-height: 1` bilerek: düğmenin
   44px'i içinde çizgiler (13px), boşluk (4px) ve etiket üst üste binmeden
   sığsın diye yükseklik tahmine bırakılmıyor. */
.rca-tetik-etiket {
	font-size: var(--rca-punto-tetik-etiket);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rca-metin-3);
}

/*
 * Baş harf avatarı.
 *
 * `text-transform: uppercase` BİLEREK BURADA, PHP'de değil: Türkçede "i"nin
 * büyüğü "İ" ve `mb_strtoupper()` bunu bilmiyor. Tarayıcı belgenin lang="tr"
 * niteliğini görüp doğru eşlemeyi kendisi yapıyor (inc/oturum.php).
 */
.rca-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rca-marka);
	color: var(--rca-zemin);
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	font-size: var(--rca-punto-avatar);
	line-height: 1;
	text-transform: uppercase;
}

/* Rol renkleri panellerin kendi renkleri; yeni bir renk ailesi açılmadı.
   Renk tek başına taşımıyor — rol çekmecede yazıyla da duruyor. */
.rca-avatar-egitmen {
	background: var(--rca-egitmen-altin);
	color: var(--rca-baslik);
}

.rca-avatar-yonetici {
	background: var(--rca-baslik);
	color: var(--rca-zemin);
}

.rca-avatar-halka {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--rca-cizgi-acik);
	border-radius: 50%;
}

/*
 * Çekmece katmanı BAŞLIĞIN DIŞINDA basılıyor (header.php): başlık çubuğu
 * `position: sticky` ve içine konan `position: fixed` bir katman viewport'a
 * değil sticky bağlamına göre yerleşiyor.
 */
.rca-cekmece-katman {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.rca-cekmece-orten {
	position: absolute;
	inset: 0;
	background: var(--rca-cekmece-orten);
	/*
	 * GÖVDE KAYDIRMASI KİLİTLENMİYOR ve bu bilinçli. Kilit için gereken
	 * `overflow: hidden` başlığın yapışkanlığını sessizce bozuyor (temel.css'te
	 * kayıtlı tuzak). Onun yerine örtü dokunma hareketlerini yutuyor; çekmece
	 * kendi kaydırmasını `pan-y` ile geri alıyor.
	 */
	touch-action: none;
}

.rca-cekmece {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(300px, 82vw);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
	background: var(--rca-yuzey);
	border-left: 1px solid var(--rca-cizgi-ince);
	box-shadow: var(--rca-golge-menu);
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.rca-cekmece-ust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rca-cekmece-baslik {
	font-size: var(--rca-punto-rol);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rca-metin-3);
}

.rca-cekmece-kapat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-right: -8px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 10px;
	font-family: var(--rca-font-govde);
	font-size: 22px;
	line-height: 1;
	color: var(--rca-metin-2);
	cursor: pointer;
}

.rca-cekmece-kapat:hover {
	background: var(--rca-zemin);
	color: var(--rca-baslik);
}

.rca-cekmece-kimlik {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.rca-cekmece-kimlik-yazi {
	min-width: 0;
}

.rca-cekmece-ad {
	display: block;
	font-family: var(--rca-font-baslik);
	font-weight: 700;
	font-size: var(--rca-punto-dugme-kucuk);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--rca-baslik);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Veli ve öğrencide bu satır HİÇ BASILMIYOR — `rca_rol_etiketi()` orada boş
   dönüyor (gerekçesi inc/oturum.php'de). */
.rca-cekmece-rol {
	display: block;
	margin-top: 1px;
	font-size: var(--rca-punto-rol);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rca-metin-3);
}

.rca-cekmece-kimlikler {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Çekmecedeki düğmeler tam genişlikte ve aynı dikey ritimde; alt eylem
   çubuğundaki ikiliyle aynı sıra: Kayıt Ol birincil, Giriş Yap ikincil. */
.rca-cekmece-dugme {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.rca-cekmece-dugme.rca-dugme-birincil {
	font-size: var(--rca-punto-dugme-kucuk);
	padding-top: 14px;
	padding-bottom: 14px;
}

.rca-cekmece-dugme.rca-dugme-cizgili {
	border-color: var(--rca-cizgi-acik);
	padding-top: 12px;
	padding-bottom: 12px;
}

.rca-cekmece-ayrac {
	display: block;
	height: 1px;
	background: var(--rca-cizgi-ince);
}

.rca-cekmece-nav {
	display: flex;
	flex-direction: column;
}

/* Dokunma hedefi 44px'in altına düşmesin diye dolgu puntoyla birlikte
   ölçüldü: 15px satır + 2×13px dolgu = 46px. */
.rca-cekmece-madde {
	padding: 13px 0;
	font-size: var(--rca-punto-dugme-kucuk);
	line-height: normal;
	color: var(--rca-metin-4);
}

.rca-cekmece-madde:hover {
	color: var(--rca-marka);
}

.rca-cekmece-cikis {
	color: var(--rca-metin-2);
}

/*
 * --- Mobil alt eylem çubuğu ---
 *
 * Tasarımın kendi mobil ağacı Giriş Yap / Kayıt Ol'u başlıkta değil, ekranın
 * altına sabitlenmiş bu şeritte taşıyor (sayfa.html satır 717-725) — mobil
 * başlığın kısa olmasının (ve başlığın bizim ağacımızda 900px altında iki
 * satıra sarmak zorunda kalmamasının) sebebi bu. 900px'in üstünde
 * görünmüyor; görünürlüğü ve gizliliği aşağıdaki kırılma noktası bloğunda —
 * BU BLOK ORADAN ÖNCE TANIMLANMALI: iki kuralın da özgüllüğü eşit (0,1,0),
 * eşit özgüllükte SONRAKİ kural kazanır; taban kural media query'den SONRA
 * gelseydi `display: none` her genişlikte kazanırdı (bu hata bir kez yapıldı
 * ve ölçülerek yakalandı).
 *
 * position: fixed BİLEREK — tasarımda position: absolute, ama orası bir
 * telefon çerçevesi içindeki önizleme; gerçek sayfada viewport'a sabitlenmesi
 * gerekiyor (spec.md §17 S18).
 */
.rca-eylem-cubugu {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	padding: 10px 12px 14px;
}

.rca-eylem-cubugu-kart {
	/* Tasarımda ölçülen zemin alfası .94; mevcut --rca-zemin-yapiskan .92.
	   0.02'lik fark (S6/S15'teki gibi) gözle ayırt edilemiyor, tek kullanımlık
	   token açmaya değmez. */
	background: var(--rca-zemin-yapiskan);
	backdrop-filter: blur(12px);
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 22px;
	padding: 12px;
	box-shadow: var(--rca-golge-eylem-cubugu);
}

.rca-eylem-cubugu-etiket {
	font-size: var(--rca-punto-eylem-etiket);
	font-weight: 600;
	color: var(--rca-marka);
	text-align: center;
	margin-bottom: 9px;
}

.rca-eylem-cubugu-dugmeler {
	display: flex;
	gap: 8px;
}

.rca-eylem-cubugu-dugmeler .rca-dugme {
	flex: 1;
}

/* Tasarımda ölçülen kenarlık rgba(43,33,26,.2) — --rca-cizgi (.25, düğmenin
   kendi varsayılanı) değil, --rca-cizgi-acik (.20) ile birebir örtüşüyor. */
.rca-eylem-cubugu-dugmeler .rca-dugme-cizgili {
	border-color: var(--rca-cizgi-acik);
	padding: 13px 0;
}

.rca-eylem-cubugu-dugmeler .rca-dugme-kucuk {
	padding: 14px 0;
}

/* --- 900px yapısal kırılma noktası --- */
@media (max-width: 900px) {
	.rca-menu {
		display: none;
	}

	.rca-baslik-eylemler {
		margin-left: auto;
	}

	.rca-altbilgi-menu {
		margin-left: 0;
	}

	/* Giriş Yap / Kayıt Ol başlıktan kalkıyor, .rca-eylem-cubugu devralıyor. */
	.rca-baslik-misafir {
		display: none;
	}

	/*
	 * Masaüstü hesap açılır menüsü de kalkıyor; yerini tetikleyici ve çekmece
	 * alıyor. Seçici hem temanın bastığı veli/yönetici menüsünü hem
	 * mu-plugin'in bastığı eğitmen menüsünü yakalıyor — ikisi de aynı
	 * `.rca-hesap` sarmalını kullanıyor (rca-ogretmen-paneli.php).
	 */
	.rca-hesap {
		display: none;
	}

	.rca-mobil-tetik {
		display: inline-flex;
	}

	/*
	 * MARKA ADI 17px. Ölçüldü: 390px'te kapsülün iç genişliği 320px; sağdaki
	 * 44px'lik tetikleyici ve 12px boşluktan sonra markaya 264px kalıyor.
	 * 18px'te logotip 257,7px, yani pay 2,8px — bu kadar ince bir payla
	 * başlık yazı tipi geç geldiğinde iki satıra sarıyor. 17px'te logotip
	 * 245,7px, pay 18,3px.
	 *
	 * Kapsülün sol dolgusu ve boşluğu da sıkışıyor; ikisi 901-960px
	 * şeridinde zaten aynı yöntemle kullanılıyor (yukarıdaki blok).
	 */
	.rca-logotip {
		font-size: var(--rca-punto-logotip-mobil);
	}

	.rca-baslik-hap {
		padding-left: 18px;
		gap: 10px 12px;
	}

	.rca-eylem-cubugu {
		display: block;
	}

	/*
	 * Sabit çubuk sayfanın üstünde durur; alt bilginin son satırı onun
	 * arkasında kalmasın diye sayfaya çubuğun yüksekliği kadar boşluk
	 * ekleniyor. 121px = .rca-eylem-cubugu'nun ölçülen gerçek yüksekliği
	 * (120,390625px, 127.0.0.1:8080, getBoundingClientRect, fontlar yüklü),
	 * üste yuvarlandı.
	 *
	 * DOLGU ARTIK ÇUBUĞUN GERÇEKTEN BASILDIĞI DURUMA BAĞLI (2026-09-03).
	 * Önceki hâli koşulsuzdu, oysa çubuğu basan blok yalnız misafire basılıyor
	 * (footer.php). Sonuç: girişli her mobil kullanıcı sayfanın altında 121px
	 * boş alan görüyordu. `rca-alt-cubuklu` sınıfını functions.php aynı
	 * koşuldan üretiyor.
	 */
	body.rca-kabuk.rca-alt-cubuklu {
		padding-bottom: 121px;
	}
}

/*
 * --- 390px altı: ikinci sıkışma kademesi ---
 *
 * BU BLOK 900px BLOĞUNDAN SONRA DURMALI: iki kuralın özgüllüğü eşit ve eşit
 * özgüllükte sonraki kazanır. Önce yazılsaydı 900px bloğu her genişlikte
 * üzerine yazardı.
 *
 * ÖLÇÜLDÜ, TAHMİN EDİLMEDİ (390px'te satır payı = kapsülün iç genişliği
 * eksi dolgu, logotip, boşluk ve 44px'lik tetikleyici):
 *
 *   390px → +18,3px   ✓ tek satır
 *   375px →  +3,3px   ✗ pay yok denecek kadar ince (iPhone SE 2/3)
 *   360px →  −11,7px  ✗ sarıyor
 *   320px →  −51,7px  ✗ sarıyor
 *
 * 320px ve 360px eski kodda da sarıyordu — marka adı 18px'ti ve orada
 * tetikleyici bile yoktu. Yani bu kademe var olan bir kusuru da kapatıyor.
 *
 * Kazanç dört yerden toplanıyor: punto 17→16px (12px), işaret 30→26px (4px),
 * logotip boşluğu 11→8px (3px), kapsül dolgusu 18/14→14/10 ve boşluk 12→8px
 * (12px). Toplam 31px; 360px'te pay −11,7'den +19,3'e çıkıyor.
 */
@media (max-width: 389px) {
	.rca-logotip {
		font-size: var(--rca-punto-logotip-dar);
		gap: 8px;
	}

	.rca-logotip-isaret {
		width: 26px;
		height: 26px;
	}

	.rca-baslik-hap {
		padding-left: 14px;
		padding-right: 10px;
		gap: 10px 8px;
	}
}

/*
 * --- 351px altı: marka adı düşer ---
 *
 * Ölçüldü: sıkıştırılmış kademeyle bile marka adı 341px'in altında
 * sığmıyor (341px'te pay +0,3px). Sınır rahat bir payla 351px'e kondu —
 * 350px'te ad gizli, 351px'te +10,3px payla duruyor.
 *
 * Ad düşünce marka İŞARETİ kalıyor; başlık markasız kalmıyor. Bu genişlik
 * aralığı iPhone SE 1. nesil (320px) ve katlanabilirlerin kapalı hâli
 * gibi cihazlar; 360px ve üstündeki her yaygın telefonda ad duruyor.
 */
@media (max-width: 350px) {
	.rca-logotip-yazi {
		display: none;
	}
}

/*
 * Çekmece yalnız mobil kabuğun parçası. 901px ve üstünde tetikleyici gizli,
 * yani normalde açılamaz; bu kural pencere ÇEKMECE AÇIKKEN büyütüldüğünde
 * kalan örtüyü kaldırıyor. Betik de aynı anda `aria-expanded`'ı düzeltiyor
 * (cekmece.js) — biri olmadan diğeri yarım kalırdı.
 */
@media (min-width: 901px) {
	.rca-cekmece-katman {
		display: none;
	}
}

/* --- Sayfa --- */
.rca-sayfa {
	padding-top: clamp(2rem, 1rem + 4vw, 4rem);
	padding-bottom: var(--rca-bosluk-bolum);
}

.rca-sayfa-baslik {
	margin-bottom: 1.5rem;
}

/* --- Alt bilgi --- */
.rca-altbilgi {
	margin-top: var(--rca-bosluk-bolum);
	padding-top: 40px;
	padding-bottom: 40px;
	background: var(--rca-yuzey);
	/* Tasarımda 0.08 opaklık ölçüldü; mevcut --rca-cizgi-ince 0.10. 0.02
	   fark yeni bir token açmaya değmez, mevcuduyla birleştirildi. */
	border-top: 1px solid var(--rca-cizgi-ince);
}

.rca-altbilgi-ic {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
}

.rca-altbilgi-marka {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rca-altbilgi-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.rca-altbilgi-telif {
	width: 100%;
	font-size: var(--rca-punto-kucuk);
}

/* =======================================================================
 * LATEPOINT'İN TEMA DEĞİŞKENLERİ
 *
 * Eklenti kendi görünümünü `:root` üstünde CSS özel özellikleriyle
 * yayınlıyor — yani biçimlendirme için RESMÎ bir yüzeyi var. Değerleri
 * burada temanın paletiyle değiştiriyoruz.
 *
 * Bu yol bilerek seçildi. Alternatif, eklentinin kurallarını daha özgül
 * seçicilerle ezmekti; çoğu `!important` taşıdığı için bu bizi kendi
 * `!important` yığınımızı yazmaya zorlardı ve her eklenti güncellemesinde
 * kırılırdı. Değişkenler eklentinin kendi sözleşmesi: 5.6.10'da tanımlı ve
 * yükseltmede korunması beklenen yüzey.
 *
 * Kapsamı yalnız giriş formu değil: randevu sihirbazı, takvim ve kabin de
 * bu değişkenleri okuyor, yani üç yüzey birden temanın rengine geliyor.
 *
 * Yarıçap sıfır geliyordu (LatePoint varsayılanı köşeli); tema hep yuvarlak.
 * ======================================================================= */

.rca-kabuk {
	--latepoint-brand-primary: var(--rca-marka);
	--latepoint-body-color: var(--rca-metin);
	--latepoint-headings-color: var(--rca-baslik);
	--latepoint-color-text-faded: var(--rca-metin-3);
	--latepoint-timeslot-selected-color: var(--rca-marka);
	--latepoint-calendar-weekday-label-color: var(--rca-baslik);
	--latepoint-calendar-weekday-label-bg: var(--rca-yuzey);
	--latepoint-side-panel-bg: var(--rca-yuzey);
	--latepoint-summary-panel-bg: var(--rca-yuzey);
	--latepoint-border-radius: 16px;
	--latepoint-border-radius-sm: 12px;
	--latepoint-border-radius-md: 20px;
	--latepoint-border-radius-lg: 28px;
}

/*
 * Kabindeki "Siparişler" sekmesi gizleniyor.
 *
 * Bu demoda ödeme yok; veliye boş bir sipariş ekranı göstermenin karşılığı
 * yok ve bu, K5'in (LatePoint markası ve alakasız yüzey görünmesin)
 * kapatmaya çalıştığı türden bir yüzey.
 *
 * Eklenti dosyasına DOKUNULMUYOR; yalnız görünürlük kapatılıyor.
 */
/*
 * Özgüllük bilerek yükseltildi. LatePoint kendi sekmelerini
 * `.latepoint .customer-dashboard-tabs a` ile biçemliyor — özgüllük (0,2,1).
 * Yalnız `.latepoint-tab-trigger[data-tab-target=...]` yazmak (0,2,0) eder ve
 * SESSİZCE KAYBEDER; kural sayfada durur ama sekme görünmeye devam eder.
 * Ölçüldü, sonra düzeltildi.
 */
.customer-dashboard-tabs .latepoint-tab-trigger[data-tab-target=".tab-content-customer-orders"] {
	display: none;
}

/* =======================================================================
 * SİHİRBAZDAKİ EĞİTMEN KARTLARI
 *
 * LatePoint eğitmen fotoğrafını `<img>` değil, arka plan görseli taşıyan bir
 * `div.os-avatar` olarak basıyor. Ölçülen varsayılan: 64x68 (kare değil),
 * kartın soluna yaslı — anasayfadaki yuvarlak eğitmen fotoğraflarıyla aynı
 * sayfada iki ayrı dil konuşuyordu.
 *
 * ÖZGÜLLÜK BİLEREK YÜKSEK. Eklentinin kendi kuralı dokuz sınıf derinliğinde:
 *
 *   .latepoint-w .latepoint-booking-form-element .os-items.os-as-grid
 *   .os-item .os-item-i .os-item-img-w.os-with-avatar .os-avatar
 *
 * Üç sınıflık okunur bir kural yazıldı, ÖLÇÜLDÜ ve hiçbir şey değişmedi:
 * `display` hâlâ `block`, `padding-bottom` hâlâ %100'dü. Kısa kural yazıp
 * "çalışıyor" varsaymak bu dosyada iki kez pahalıya patladı; bu yüzden
 * zincir eklentininkiyle eşleşiyor ve önüne kabuk sınıfımız ekleniyor.
 * `!important` KULLANILMADI: özgüllük kazanınca gerekmiyor ve `!important`
 * bir sonraki düzeltmeyi imkânsızlaştırır.
 *
 * Kırpma anasayfadakiyle aynı: `cover`, ortadan. Fotoğraflar da aynı
 * dosyalar (`assets/img/egitmen-*.jpg`) — betik onları medyaya alıp
 * eğitmenin `avatar_image_id` alanına bağlıyor.
 * ======================================================================= */

.rca-kabuk .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 8px;
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-img-w.os-with-avatar {
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element .os-items.os-as-grid .os-item .os-item-i .os-item-img-w.os-with-avatar .os-avatar {
	width: clamp(56px, 5vw, 76px);
	height: clamp(56px, 5vw, 76px);
	/* Kareyi eklenti `padding-bottom: 100%` ile kuruyor; sıfırlanmazsa
	   yükseklik iki kez ekleniyor ve daire yumurtaya dönüyor (64x68 ölçüldü). */
	padding: 0;
	border-radius: 50%;
	background-size: cover;
	background-position: 50% 50%;
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w {
	width: 100%;
	padding: 0;
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i .os-item-name-w .os-item-name {
	text-align: center;
	/* Uzun soyadı dar grid sütununda kartı yana taşırmasın. */
	overflow-wrap: anywhere;
}

/* Öğrenci adının yanındaki "Düzenle" düğmesi gizleniyor (M5).
 *
 * LatePoint bu düğmeyi `generate_summary_for_customer()` içinde, yalnız
 * `$editable` doğruyken basıyor (`customer_helper.php:35`) ve tıklanınca
 * sihirbazı müşteri adımına geri döndürüyor.
 *
 * Neden kaldırılıyor: veli adını kendi kabininden değiştiriyor. Sihirbazın
 * ortasında ikinci bir düzenleme yolu iki farklı doğruluk kaynağı üretiyor
 * ve veliyi randevunun ortasında formdan çıkarıyor.
 *
 * Eklenti dosyası YAMALANMIYOR — düğme yalnız görünmüyor. Bu bir yetki
 * değil arayüz sadeleştirmesi olduğu için sunucu tarafı kapı gerekmiyor:
 * adres alanının aksine burada gizlenen şey bir veri yolu değil, bir
 * kestirme. Veli o adımı menüden zaten açabilir.
 */
.rca-kabuk .latepoint-w .summary-box-customer-info .sbc-action.load-customer-step-trigger {
	display: none;
}

/* =======================================================================
 * ÜYELİK KARTI
 *
 * Randevu formunun YERİNE geçiyor, o yüzden formla aynı genişlik ailesinde
 * ve kimlik kartlarıyla aynı yüzey dilinde: `--rca-yuzey` zemin,
 * `--rca-cizgi-kart` kenar. Yeni token üretilmedi.
 *
 * Tek eylem düğmesi WhatsApp yeşili DEĞİL marka rengimizde: bu kart bir
 * reklam değil, akademinin kendi cümlesi.
 * ======================================================================= */

.rca-uyelik-kart {
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 28px;
	text-align: center;
	background: var(--rca-yuzey);
	border: 1px solid var(--rca-cizgi-kart);
	border-radius: var(--rca-yuvarlak-kart);
}

.rca-uyelik-kart-baslik {
	margin: 0 0 12px;
	font-family: var(--rca-font-baslik);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.rca-uyelik-kart-metin {
	margin: 0 0 24px;
	line-height: 1.6;
}

.rca-uyelik-kart-dugme {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--rca-marka);
}

.rca-uyelik-kart-dugme:hover,
.rca-uyelik-kart-dugme:focus-visible {
	background: var(--rca-marka-koyu);
}

/* =======================================================================
 * SİHİRBAZDAKİ ÖĞRENCİ BİLGİSİ FORMU
 *
 * Üç alan sihirbazın kendi adım içeriğinin üstünde duruyor ve onun form
 * genişliğini paylaşıyor. Dar ekranda tek sütuna düşüyor; üç alanı yan yana
 * sıkıştırmak telefonda okunmaz hale getiriyordu.
 * ======================================================================= */

/* Öğrenci bilgisi alanları — randevu sihirbazının son adımında.
 *
 * IZGARA KABIN GENİŞLİĞİNE GÖRE SARIYOR (N2.2).
 *
 * Önceki hâl `@media (min-width: 640px)` ile üç sütuna geçiyordu. Medya
 * sorgusu EKRANI ölçer, kabı değil: geniş ekranda dar bir modalın içine üç
 * sütun zorlanıyor ve sihirbazda yatay kaydırma çıkıyordu. `auto-fit` +
 * `minmax` kabın gerçek genişliğine bakıyor, yani modal ne kadarsa o kadar
 * sütun.
 */
.rca-ogrenci-bilgisi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.rca-ogrenci-bilgisi-alan {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Izgara öğesinin varsayılan `min-width: auto` değeri içerik
	   genişliğinin altına inmeyi engelliyor; uzun bir seçenek adı yine
	   taşırırdı. */
	min-width: 0;
	font-size: 0.9em;
}

/* SELECT DE BİÇEMLENİYOR (N2.1).
 *
 * Önceki kural yalnız `input` diyordu. Biçemlenmemiş bir `select` doğal
 * genişliğinde çizilir — yani EN UZUN SEÇENEĞİ kadar. "Başlangıç — Taşları
 * yeni öğreniyor" modalı yarıyordu; yatay kaydırmanın asıl sebebi buydu.
 */
.rca-ogrenci-bilgisi-alan input,
.rca-ogrenci-bilgisi-alan select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/*
	 * G9 — Yukseklik ACIKCA veriliyor.
	 *
	 * Ayni dolgu ve kenar verilmesine ragmen olculdu: `input` 39px, `select`
	 * 41px. Fark tarayicinin iki denetimi farkli ic yukseklikle cizmesinden
	 * geliyor; dolguyu esitlemek yetmiyor. Ayni satirda yan yana duran iki
	 * alanin 2px kaymasi goze carpiyor.
	 *
	 * 44px keyfi degil: temanin dokunma hedefi olcusu (panel CSS'inde
	 * `min-width: 44px` olarak zaten kullaniliyor) ve kabin formundaki alan
	 * yuksekligiyle ayni. Yani sihirbaz ile kabin ayni olcuye oturuyor.
	 */
	height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 10px;
	background: var(--rca-yuzey);
	font: inherit;
	color: inherit;
}

/* =======================================================================
 * POP PENCERE — karşılama ve sonuç bildirimi (M7)
 *
 * ANASAYFA.CSS'TEN BURAYA TAŞINDI. Bileşen artık iki yerde kullanılıyor:
 * kayıt sonrası karşılama (yalnız anasayfa) ve sonuç bildirimi (HER
 * sayfada çıkabilir — doğrulama ve teyit bağlantıları nereye düşerse).
 * `anasayfa.css` yalnız anasayfada yüklendiği için bildirim biçemsiz
 * kalırdı; `duzen.css` her sayfada yükleniyor.
 *
 * Bildirim eskiden sayfanın üstünde ince bir banttı. Bant sayfa akışını
 * itiyordu ve veli çoğu zaman görmeden kaydırıyordu. İki mesaj da artık
 * AYNI bileşeni kullanıyor — ayrı yazılsalardı zamanla ayrışırlardı.
 * ======================================================================= */

/* Yeni öğrenci kaydından sonra yalnız bir kez gösterilen karşılama. */
.rca-kayit-karsilama {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 18px;
}

.rca-kayit-karsilama-arka {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: color-mix(in srgb, var(--rca-baslik) 58%, transparent);
	cursor: pointer;
}

.rca-kayit-karsilama-kart {
	position: relative;
	z-index: 1;
	width: min(520px, calc(100vw - 36px));
	padding: clamp(28px, 6vw, 48px);
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 26px;
	background: var(--rca-yuzey);
	box-shadow: var(--rca-golge-robot);
	text-align: center;
}

.rca-kayit-karsilama-kart h2 {
	margin: 0;
	color: var(--rca-baslik);
	font: 700 clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem)/1.08 var(--rca-font-baslik);
}

.rca-kayit-karsilama-kart p {
	margin: 16px 0 26px;
	color: var(--rca-metin);
	font-size: var(--rca-punto-govde);
}

.rca-kayit-karsilama-kapat {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--rca-cizgi-ince);
	border-radius: 50%;
	background: var(--rca-zemin);
	color: var(--rca-baslik);
	font: 400 1.5rem/1 var(--rca-font-govde);
	cursor: pointer;
}

.rca-kayit-karsilama :focus-visible {
	outline: 3px solid var(--rca-marka);
	outline-offset: 3px;
}

/* Sonuç bildiriminin iyi/kötü çeşidi. Kabuk aynı; yalnız üst şerit rengi
   ayrışıyor. Renk tek başına anlam taşımıyor — mesajın metni zaten
   durumu söylüyor, şerit yalnız hızlı okumaya yardım ediyor. */
.rca-pop-iyi .rca-kayit-karsilama-kart {
	border-top: 4px solid var(--rca-marka);
}

.rca-pop-kotu .rca-kayit-karsilama-kart {
	border-top: 4px solid #C0392B;
}

/* =======================================================================
 * SİHİRBAZIN GENİŞLİK DAVRANIŞI — 2026-08-31 taraması
 *
 * Üç kusur da ölçülerek bulundu; hiçbiri göz kararı değil.
 * ======================================================================= */

/*
 * G4 — Sihirbaz 601–792px arasında SAYFAYI yatay kaydırıyordu.
 *
 * Ölçüm (768px viewport, temiz yükleme): `clientWidth` 753, `scrollWidth`
 * 766 — 13px yatay kaydırma. Sihirbaz 740px, ebeveyni 700px.
 *
 * Kök neden: sihirbazın KENDİ `width` kuralı yok. Genişlik iki çocuğundan
 * geliyor ve ikisi de küçülemez biçimde tanımlı:
 *
 *   .latepoint-side-panel { flex: 0 0 270px }
 *   .latepoint-form-w     { flex: 0 0 470px }
 *
 * 270 + 470 = 740px taban. Flex kapsayıcının `min-width: auto` varsayılanı
 * da onu içeriğinin altına inmekten alıkoyuyor, yani kap ebeveynini taşırıyor.
 *
 * Düzeltme çocukların KÜÇÜLEBİLMESİNİ sağlıyor. `overflow-x: hidden` ile
 * maskelenmedi: o, taşan içeriği erişilemez yapar ve sebebi gizler.
 *
 * 1440 ve 1024'te görünüm DEĞİŞMİYOR — oralarda yer bol, `flex-shrink`
 * devreye girmiyor ve iki panel 270/470'te kalıyor (ölçüldü).
 *
 * LatePoint 600px'in altında kapsayıcıyı zaten `display: block` yapıp yan
 * paneli gizliyor; bu kural o aralığa dokunmuyor.
 */
.rca-kabuk .latepoint-w .latepoint-booking-form-element {
	max-width: 100%;
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-side-panel,
.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-form-w {
	min-width: 0;
	flex-shrink: 1;
}

/*
 * G6 — Yan sütundaki telefon numarası satır ortasından bölünüyordu.
 *
 * Ölçüm: sütun içeriği 190px ve ortalanmış; `0553 606 57 24` iki satıra
 * bölünüyordu (`0553 606` / `57 24`). Bölünmüş bir telefon numarası
 * okunamaz ve aranamaz.
 *
 * Metnin kaynağı `steps_support_text` ayarı (`yapilandirma.php`) ve METİN
 * DEĞİŞMİYOR — düzeltme sunum katmanında. Numara `<strong>` içinde geldiği
 * için kural oraya bağlandı.
 */
.rca-kabuk .latepoint-w .latepoint-booking-form-element .latepoint-side-panel .latepoint-questions strong {
	white-space: nowrap;
}

/*
 * G5 — Mobilde kartın sol köşeleri köşeli, sağ köşeleri yuvarlaktı.
 *
 * Yuvarlaklık iki panele PAYLAŞTIRILMIŞ: yan panel sol köşeleri, form sağ
 * köşeleri yuvarlıyor. LatePoint 600px'in altında yan paneli gizleyince
 * geriye `border-radius: 0 20px 20px 0` taşıyan yarım bir kart kalıyor.
 *
 * Kırılma noktası eklentinin kendi değeriyle birebir aynı (`max-width: 600px`,
 * `front.css` içinde ölçüldü) — kendi noktamızı uydurmak iki kuralın
 * ayrışacağı bir aralık üretirdi.
 *
 * Yarıçap eklentinin kendi token'ından okunuyor; sabit sayı yazılmadı.
 */
@media (max-width: 600px) {
	.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-form-w {
		border-radius: var(--latepoint-border-radius-md);
	}
}

/*
 * G5 (devam) — Kartın yuvarlak köşeleri İÇERİDEN örtülüyordu.
 *
 * `border-radius`ı düzeltmek yetmedi ve bunu EKRAN GÖSTERDİ, hesaplanan
 * değer değil: `.latepoint-form-w` 20px yuvarlaktı ama ölçüldüğünde
 *
 *   div.latepoint-form-w   → beyaz, br: 0 20px 20px 0, [613..1083]
 *     form.latepoint-form  → beyaz, br: 0,             [613..1083]
 *       div.latepoint-heading-w → beyaz, br: 0,        [613..1083]
 *
 * yani AYNI sınırlarda iki kare beyaz katman, yuvarlak ebeveynin köşelerini
 * boyayarak örtüyordu. Kart her genişlikte kare görünüyordu — mobilde
 * değil, HER YERDE.
 *
 * `overflow: hidden` KULLANILMADI: takvimin müsaitlik balonu ve açılır
 * listeler kasten kartın dışına taşıyor, kırpmak onları keserdi.
 * Bunun yerine iç katmanlar saydamlaştırıldı; ayırıcı çizgileri
 * `border-bottom`da yaşadığı için kayıp yok.
 *
 * G8 — Aynı kartta İKİ FARKLI BEYAZ vardı.
 *
 * Ölçüm: yan panel `rgb(255,253,249)` (`--rca-yuzey`, temanın kremi), form
 * paneli `rgb(255,255,255)` (saf beyaz). İkisi kartın ortasında birleşiyor
 * ve dikey bir dikiş bırakıyordu.
 *
 * Sebep G3'ün aynısı: tema LatePoint'i eklentinin CSS değişkenleriyle
 * biçimliyor ve `--latepoint-side-panel-bg` VAR ama form panelinin
 * karşılığı YOK. Yani tema kremi istemiş, eklenti yarısını vermiş.
 * Yeni renk açılmadı; zaten yan panelde kullanılan token uygulandı.
 */
.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-form-w {
	background-color: var(--rca-yuzey);
}

.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-form-w > form.latepoint-form,
.rca-kabuk .latepoint-w .latepoint-booking-form-element > .latepoint-form-w .latepoint-heading-w {
	background-color: transparent;
}

/* =======================================================================
 * OYNAT DÜĞMESİ VE VİDEO IŞIK KUTUSU
 *
 * Bu iki bileşen anasayfa.css'ten buraya TAŞINDI (2026-09-08). Sebebi:
 * çocuk satranç kursu sayfası da ikisini kullanıyor ve anasayfa.css
 * yalnız anasayfada kuyruğa alınıyor — orada kalsalardı yeni sayfada
 * oynat dairesi hiç görünmez, ışık kutusu da biçimsiz açılırdı.
 * (Ölçüldü: tezgâhta tam olarak bu oldu.)
 *
 * İkinci bir kopya çıkarmak yerine taşındı; aynı bileşenin iki dosyada
 * iki tanımı, biri değişince diğerinin sessizce ayrışması demekti.
 * ======================================================================= */

/* Oynat düğmesi — saf CSS üçgen, görsel dosyası yok. Tıklanabilir değil:
   video henüz müşteriden gelmedi. */
.rca-oynat {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--rca-marka);
	box-shadow: var(--rca-golge-dugme);
	display: grid;
	place-items: center;
}

.rca-oynat::after {
	content: '';
	width: 0;
	height: 0;
	margin-left: 6px;
	border-left: 20px solid var(--rca-zemin);
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
}

/* TRT kartındaki küçük resmin ortasındaki daire — aynı bileşenin küçük
   ölçüsü. Gölgesi de daha dar. */
.rca-oynat-kucuk {
	width: 35px;
	height: 35px;
	box-shadow: var(--rca-golge-oynat-kucuk);
	transition: transform 140ms ease;
}

.rca-oynat-kucuk::after {
	margin-left: 3px;
	border-left-width: 10px;
	border-top-width: 7px;
	border-bottom-width: 7px;
}

/* =======================================================================
 * VİDEO IŞIK KUTUSU
 *
 * Yalnız TRT videosu temaya konduğunda basılıyor (parts/trt-serit.php).
 * Modal davranışı `<dialog>`ın kendi yeteneği; buradaki iş yalnız görünüm.
 * ======================================================================= */

/* GENİŞLİK YÜKSEKLİĞE DE BAĞLI, çünkü kapatma düğmesi kutunun DIŞINDA
   duruyor (52px yukarıda) ve o 52px yoksa düğme ekranın üstüne taşıp
   görünmez oluyor. 1280x720'de ölçüldü: kutu 1100x638,7 -> üstte yalnız
   40,6px kalıyor, düğme -11,4px'te, yani ekran dışında.

   Üçüncü sınır videonun en-boy oranından geliyor: yükseklik = genişlik /
   1,7222 (496x288). Düğme + boşluk için 120px ayrılıyor, kalan yükseklik
   orana çarpılıp genişliğe sınır olarak konuyor. Aynı ekranda kutu artık
   1033px ve düğme +8px'te — ekranın içinde.

   Alt sınır 320px: çok kısa ekranda kutu okunmaz hâle gelmesin. Zaten
   700px altında düğme kutunun içine alınıyor (aşağıdaki kırılma noktası),
   o dalda bu hesabın bağlayıcılığı kalmıyor. */
.rca-isik-kutusu {
	width: max(320px, min(1100px, 92vw, calc((100vh - 120px) * 1.7222)));
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: clamp(16px, 10px + 1.3vw, 26px);
	background: var(--rca-baslik);
	box-shadow: var(--rca-golge-kutu);
	overflow: visible;
}

.rca-isik-kutusu::backdrop {
	background: rgba(43, 33, 26, 0.72);
	backdrop-filter: blur(4px);
}

.rca-isik-kutusu-video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

/* Kapatma düğmesi kutunun dışında, sağ üstte — videoyu örtmüyor. Dar
   ekranda kutunun içine alınıyor (aşağıdaki kırılma noktası). */
.rca-isik-kutusu-kapat {
	position: absolute;
	top: -52px;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rca-zemin-yapiskan);
	font-family: var(--rca-font-baslik);
	font-size: 26px;
	line-height: 1;
	color: var(--rca-baslik);
	cursor: pointer;
}

.rca-isik-kutusu-kapat:hover {
	background: var(--rca-zemin);
}

@media (max-width: 700px) {
	.rca-isik-kutusu-kapat {
		top: 10px;
		right: 10px;
	}
}