/* =========================================================================
   NB Boks — ön yüz biçimlendirmesi (v3: premium, hareketli)

   Derin koyu zemin, cam yüzeyler, kırmızı parıltı ve altın vurgu.
   Hareket bilinçli olarak yoğun; müşterinin isteği bu yönde.
   prefers-reduced-motion açık olan kullanıcıda tüm hareket kapanır.
   ========================================================================= */

:root {
	/*
	 * Renk — telefonda çok karanlık kaldığı bildirildi, tüm zeminler ve
	 * ikincil metinler kademeli olarak açıldı. Ölçülen kontrast zaten
	 * yeterliydi ama telefon ekranında, özellikle düşük parlaklıkta ve
	 * dışarıda, gerçek okunurluk ölçümden farklı. Koyu ve premium duruş
	 * korunarak her yüzey bir kademe yukarı alındı.
	 */
	--siyah: #22222c;      /* önce #08080b */
	--zemin: #2b2b38;      /* önce #0d0d12 */
	--yuzey: #363645;      /* önce #15151d */
	--yuzey-2: #434353;    /* önce #1d1d27 */
	--cizgi: rgba(255, 255, 255, 0.11);
	--cizgi-parlak: rgba(255, 255, 255, 0.22);

	--kirmizi: #fd3c3d;
	--kirmizi-parlak: #ff7a7b;
	--kirmizi-koyu: #c8161c;
	--altin: #edc45f;

	--beyaz: #f8f8fb;
	--gri: #d3d3de;        /* önce #9b9baa, sonra #b2b2c0 */
	--gri-koyu: #bcc0cc;   /* önce #83879a, sonra #9298aa */

	/* Dizgi */
	--baslik: "Archivo", "Arial Narrow", Helvetica, sans-serif;
	--metin: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	/* Afiş dizgisi: müşterinin onayladığı ilk tasarımın dar, afiş ölçekli
	   yazı tipi. Yalnızca giriş bloğu ve üst menüde kullanılır. */
	--afis: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;

	/* Ölçü */
	--olcu: 1220px;
	--olcu-dar: 68ch;
	--gutter: clamp(1.15rem, 4vw, 3rem);
	--bosluk-bolum: clamp(4.5rem, 9vw, 8.5rem);
	--yuvarlak: 20px;
	--yuvarlak-kucuk: 12px;

	/* Hareket */
	--yay: cubic-bezier(0.22, 1, 0.36, 1);
	--hiz: 0.7s;
}

/* ---------- Temel ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 7rem;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--zemin);
	color: var(--beyaz);
	font-family: var(--metin);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "wdth" 100;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

button {
	font: inherit;
}

:focus-visible {
	outline: 3px solid var(--kirmizi);
	outline-offset: 4px;
	border-radius: 4px;
}

.ekran-disi {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.atla-baglantisi {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: 0.8rem 1.3rem;
	background: var(--kirmizi);
	color: #fff;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 700;
	border-radius: 999px;
}

.atla-baglantisi:focus {
	top: 1rem;
}

/* ---------- Kaydırma ilerleme çubuğu ---------- */

.ilerleme {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 90;
	background: linear-gradient(90deg, var(--kirmizi), var(--altin));
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
}

/* ---------- Dizgi ölçeği ---------- */

h1,
h2,
h3,
h4 {
	font-family: var(--baslik);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 0.5em;
	font-variation-settings: "wdth" 112;
}

h2 {
	font-size: clamp(2.2rem, 5.6vw, 4rem);
	text-transform: uppercase;
}

h3 {
	font-size: clamp(1.4rem, 2.6vw, 1.95rem);
}

h4 {
	font-size: clamp(1.1rem, 1.8vw, 1.32rem);
}

p {
	margin: 0 0 1.15em;
	max-width: var(--olcu-dar);
}

/* ---------- Yerleşim ---------- */

.kap {
	width: 100%;
	max-width: var(--olcu);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bolum {
	position: relative;
	padding-block: var(--bosluk-bolum);
}

.bolum-alternatif {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(253, 60, 61, 0.09), transparent 60%),
		var(--siyah);
}

/* Kutuya 46ch sınırı konulmuştu; "SPORCULARIMIZ" gibi uzun tek kelimeler
   bu kutudan geniş kalıyordu. Başlık degradesi background-clip:text ile
   çalıştığı için kutu dışına taşan harflerin altında boyanacak zemin
   kalmıyor ve harfler görünmez oluyordu. Sınır başlıktan alınıp yalnızca
   paragrafa verildi. */
.bolum-basligi {
	margin-bottom: clamp(2.2rem, 4vw, 3.5rem);
}

/* Başlıktaki hafif parlaklık geçişi.
   Önceki hâli --gri tonunda bitiyordu ve uzun kelimelerin son harfleri
   koyu zeminde kaybolup kesik görünüyordu ("SPORCULARIMIZ" -> "SPORCULARIN").
   Geçiş artık iki uçta da açık tonda kalıyor. */
.bolum-basligi h2 {
	margin-bottom: 0.3em;
	max-width: 16ch;
	/* Son çare: aşırı uzun bir kelime yine de sığmazsa kutudan kaçmak
	   yerine bölünsün; görünmez harf kalmasın. */
	overflow-wrap: break-word;
	background: linear-gradient(92deg, #ffffff 0%, #d6d6e4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.bolum-basligi p {
	font-size: 1.12rem;
	color: var(--gri);
	margin-bottom: 0;
	max-width: 46ch;
}

/* ---------- Düğmeler ---------- */

.dugme {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.05rem 1.9rem;
	background: var(--kirmizi);
	color: #fff;
	text-decoration: none;
	/*
	 * Marka kırmızısı üzerinde beyaz metnin kontrastı 3.55:1. Normal punto
	 * için yetersiz, ancak 18.66px ve kalın metin "büyük yazı" sayıldığından
	 * 3:1 eşiği geçerli oluyor. Markanın kırmızısını bozmak yerine punto
	 * büyütüldü; düğme zaten sayfanın ana eylemi.
	 */
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 0 0 0 rgba(253, 60, 61, 0.55);
	transition: box-shadow 0.4s var(--yay), transform 0.35s var(--yay);
}

/* Düğmenin içinden geçen parıltı */
.dugme::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
	transform: translateX(-120%);
	transition: transform 0.75s var(--yay);
}

.dugme:hover,
.dugme:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 38px -10px rgba(253, 60, 61, 0.75);
}

.dugme:hover::after,
.dugme:focus-visible::after {
	transform: translateX(120%);
}

.dugme span {
	font-variant-numeric: tabular-nums;
	/* Dar ekranda telefon numarası "0533 353 50" / "50" diye bölünüyordu. */
	white-space: nowrap;
}

.dugme-cizgi {
	background: rgba(255, 255, 255, 0.04);
	color: var(--beyaz);
	box-shadow: inset 0 0 0 1px var(--cizgi-parlak);
	backdrop-filter: blur(8px);
}

.dugme-cizgi:hover,
.dugme-cizgi:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px var(--beyaz), 0 14px 34px -14px rgba(0, 0, 0, 0.9);
}

/* ---------- Başlık / gezinme ---------- */

.site-basligi {
	position: sticky;
	top: 0;
	z-index: 80;
	padding-block: 1.15rem;
	transition: padding 0.35s var(--yay), background-color 0.35s ease, backdrop-filter 0.35s ease;
}

/*
 * Buzlu cam efekti başlığın KENDİSİNDE değil, ::before katmanında.
 * backdrop-filter, uygulandığı öğeyi position:fixed torunlar için "kapsayıcı
 * blok" yapar. Efekt doğrudan .site-basligi üzerindeyken, başlık sabitlenince
 * (.sabit) ekran dışındaki mobil menü (transform: translateX(100%)) başlığa
 * göre konumlanıp sağa taşıyor ve mobilde yatay kaymaya yol açıyordu. Efekti
 * ayrı bir katmana alınca başlık kapsayıcı blok olmaktan çıkar, menü yeniden
 * viewport'a sabitlenir ve taşma kaybolur. Görünüm birebir aynı kalır.
 */
.site-basligi::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(18, 18, 24, 0.82);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--cizgi);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.site-basligi.sabit {
	padding-block: 0.6rem;
}

.site-basligi.sabit::before {
	opacity: 1;
}

.basligi-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.site-logo img {
	max-height: 44px;
	width: auto;
	transition: max-height 0.35s var(--yay);
}

.sabit .site-logo img {
	max-height: 36px;
}

.site-logo-metin {
	font-family: var(--baslik);
	font-size: 1.4rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--beyaz);
	text-decoration: none;
	line-height: 1.1;
}

.ana-menu {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ana-menu a {
	position: relative;
	color: var(--beyaz);
	text-decoration: none;
	/* "Ana sayfa" ve "Antrenman Programı" iki satıra bölünüyordu; dar
	   masaüstünde bölmek yerine punto küçülüyor. */
	white-space: nowrap;
	font-family: var(--afis);
	font-size: clamp(1rem, 1.18vw, 1.2rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-block: 0.4rem;
}

/* Alttan büyüyen çizgi */
.ana-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--kirmizi);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.35s var(--yay);
}

.ana-menu a:hover::after,
.ana-menu .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.menu-dugmesi {
	display: none;
	background: none;
	border: 0;
	color: var(--beyaz);
	padding: 0.5rem;
	cursor: pointer;
}

.menu-dugmesi svg {
	display: block;
}

.basligi-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.62rem 1.25rem;
	color: var(--beyaz);
	text-decoration: none;
	font-size: 0.98rem;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px var(--cizgi-parlak);
	font-variant-numeric: tabular-nums;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.basligi-tel::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kirmizi);
	flex: none;
	animation: nabiz 2.2s ease-in-out infinite;
}

.basligi-tel:hover {
	background: rgba(253, 60, 61, 0.16);
	box-shadow: inset 0 0 0 1px var(--kirmizi);
}

@keyframes nabiz {
	0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(253, 60, 61, 0.6); }
	50% { transform: scale(1.25); opacity: 0.75; box-shadow: 0 0 0 7px rgba(253, 60, 61, 0); }
}

/* ---------- Afiş ---------- */

.afis {
	position: relative;
	min-height: min(96vh, 900px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--siyah);
	margin-top: calc(-1 * (1.15rem * 2 + 44px));
	padding-top: calc(1.15rem * 2 + 44px);
}

.afis-gorsel {
	position: absolute;
	/* Paralaksın oynayacağı pay. JavaScript kaymayı bu payın içinde
	   sınırlıyor, böylece kenarda boşluk açılmıyor. */
	inset: -14% 0;
	z-index: 0;
	will-change: transform;
}

.afis-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	animation: yavas-yakinlas 22s ease-out forwards;
}

@keyframes yavas-yakinlas {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}

.afis-perde {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(12, 12, 18, 0.82) 0%, rgba(12, 12, 18, 0.52) 45%, rgba(12, 12, 18, 0.08) 75%, rgba(12, 12, 18, 0.4) 100%),
		linear-gradient(to top, var(--siyah) 1%, rgba(12, 12, 18, 0) 34%);
}

/* Kırmızı parıltı lekesi */
.afis::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 55vw;
	height: 55vw;
	max-width: 760px;
	max-height: 760px;
	right: -14vw;
	top: -18vw;
	background: radial-gradient(circle, rgba(253, 60, 61, 0.3), transparent 62%);
	filter: blur(30px);
	animation: suzul 11s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes suzul {
	from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
	to { transform: translate3d(-4%, 5%, 0) scale(1.12); opacity: 1; }
}

.afis-ic {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(4rem, 9vw, 7rem);
}

.afis-rozet {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1.4rem;
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px var(--cizgi-parlak);
	backdrop-filter: blur(10px);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--beyaz);
	max-width: none;
}

.afis-rozet::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--altin);
	animation: nabiz 2.6s ease-in-out infinite;
}

/*
 * Afiş başlığı, müşterinin onayladığı ilk tasarımdaki afiş yığını:
 * dar yazı tipi, satırlar üst üste, aralarında nefes yok. Satır kırılması
 * Site Ayarları'ndaki "Büyük başlık" kutusuna basılan Enter ile belirlenir.
 */
.afis-ad {
	font-family: var(--afis);
	font-size: clamp(3.4rem, 13.5vw, 10.5rem);
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	max-width: none;
}

.afis-ad .afis-satir {
	display: block;
}

/*
 * Kelime kutuları overflow: hidden ile kırpıyor. 0.8'lik satır yüksekliğinde
 * bu, harflerin altını kesiyordu; kutu harf boyuna açılıp fazlalık negatif
 * boşlukla geri alınıyor, böylece satırlar yine sıkı duruyor.
 */
.afis-ad .kelime {
	/* 1.3 satır yüksekliği İ'nin noktasına ve Ş'nin kuyruğuna pay bırakır;
	   negatif boşluk toplamı 0.8em'e indirir, yani satırlar yine sıkı. */
	line-height: 1.3;
	margin-block: -0.25em;
}

/* Başlık kelimeleri sırayla yukarıdan gelir */
.kelime {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

.kelime > span {
	display: inline-block;
	transform: translateY(105%);
	transition: transform 0.85s var(--yay);
}

.yuklendi .kelime > span {
	transform: translateY(0);
}

.afis-metin {
	font-size: clamp(1.02rem, 1.4vw, 1.16rem);
	color: #e4e4ec;
	max-width: 46ch;
	margin-bottom: 2rem;
}

.afis-eylem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

.afis-yer {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.94rem;
	color: var(--gri);
	margin: 1.9rem 0 0;
}

/*
 * İlk tasarımda adres satırının önünde çizgi yok; giriş bloğu referansla
 * birebir olsun diye çizgi yalnızca afiş dışında kullanılıyor.
 */
.afis-yer::before {
	content: none;
}

/*
 * Giriş düğmeleri: ilk tasarımdaki köşeli, dar dizgili afiş düğmeleri.
 * Sitenin geri kalanındaki yuvarlak düğmeler olduğu gibi kalıyor.
 */
.afis .dugme {
	font-family: var(--afis);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 0;
	padding: 1rem 1.6rem;
	box-shadow: none;
}

.afis .dugme-cizgi {
	box-shadow: inset 0 0 0 2px currentColor;
}

.afis .dugme:hover,
.afis .dugme:focus-visible {
	box-shadow: none;
}

.afis .dugme-cizgi:hover,
.afis .dugme-cizgi:focus-visible {
	box-shadow: inset 0 0 0 2px currentColor;
}

/* Afiş içeriği sayfa yüklenince yumuşakça belirir */
.afis-rozet,
.afis-metin,
.afis-eylem,
.afis-yer {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--yay), transform 0.8s var(--yay);
}

.yuklendi .afis-rozet { transition-delay: 0.1s; }
.yuklendi .afis-metin { transition-delay: 0.55s; }
.yuklendi .afis-eylem { transition-delay: 0.7s; }
.yuklendi .afis-yer { transition-delay: 0.85s; }

.yuklendi .afis-rozet,
.yuklendi .afis-metin,
.yuklendi .afis-eylem,
.yuklendi .afis-yer {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Nasıl başlarım: adım akışı ---------- */

.adimlar-bolum {
	background:
		radial-gradient(85% 120% at 15% 0%, rgba(253, 60, 61, 0.11), transparent 58%),
		var(--siyah);
}

.adimlar {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* Adımları birleştiren çizgi; bölüm görününce soldan sağa çizilir.
   Rakamların ortasından geçince içi boş rakamları ikiye bölüyordu,
   bu yüzden hemen altlarına alındı. */
.adimlar::before {
	content: "";
	position: absolute;
	inset-block-start: clamp(46px, 5.4vw, 72px);
	inset-inline: 2px;
	height: 2px;
	background: linear-gradient(90deg, var(--kirmizi), var(--altin));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 1.5s var(--yay) 0.25s;
	opacity: 0.5;
}

.adimlar.belirdi::before {
	transform: scaleX(1);
}

.adim {
	position: relative;
	padding-top: 0;
}

.adim-no {
	display: block;
	font-family: var(--baslik);
	font-size: clamp(3.2rem, 6.4vw, 5.2rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.045em;
	font-variation-settings: "wdth" 108;
	margin-bottom: 0.7rem;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.28);
	transition: -webkit-text-stroke-color 0.5s ease, color 0.5s ease;
	font-variant-numeric: tabular-nums;
}

.adim:hover .adim-no {
	-webkit-text-stroke-color: var(--kirmizi);
	color: rgba(253, 60, 61, 0.1);
}

.adim h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 2.3vw, 1.7rem);
	text-transform: uppercase;
	font-variation-settings: "wdth" 108;
}

.adim p {
	margin: 0;
	color: var(--gri);
	font-size: 1rem;
	max-width: 34ch;
}

/* ---------- Dersler ---------- */

.ders-izgara {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.2vw, 1.6rem);
}

.ders-karo {
	position: relative;
	display: block;
	min-height: clamp(260px, 32vw, 420px);
	border-radius: var(--yuvarlak);
	overflow: hidden;
	text-decoration: none;
	color: var(--beyaz);
	background: var(--yuzey);
	box-shadow: inset 0 0 0 1px var(--cizgi);
	transition: transform 0.55s var(--yay), box-shadow 0.55s var(--yay);
}

.ders-karo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.1s var(--yay), filter 0.6s ease;
	/* Ders fotoğrafları müşteri isteğiyle RENKLİ gösteriliyor (siyah-beyaz değil).
	   Alttaki koyu degrade (::after) başlık okunurluğunu sağlıyor. */
	filter: contrast(1.03) brightness(0.97);
}

.ders-karo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 12, 18, 0.92) 8%, rgba(12, 12, 18, 0.15) 58%, rgba(12, 12, 18, 0.4) 100%);
	transition: opacity 0.5s ease;
}

.ders-karo:hover,
.ders-karo:focus-visible {
	transform: translateY(-6px);
	box-shadow: inset 0 0 0 1px var(--kirmizi), 0 28px 60px -28px rgba(253, 60, 61, 0.6);
}

.ders-karo:hover img,
.ders-karo:focus-visible img {
	transform: scale(1.1);
	filter: contrast(1.05) brightness(1.02);
}

.ders-yazi {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	gap: 0.5rem;
}

.ders-yazi h3 {
	margin: 0;
	font-size: clamp(1.45rem, 2.9vw, 2.15rem);
	text-transform: uppercase;
	font-variation-settings: "wdth" 110;
}

.ders-yazi p {
	margin: 0;
	max-width: 40ch;
	color: #c8c8d6;
	font-size: 0.99rem;
	/* Üstüne gelince açılır */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.55s var(--yay), opacity 0.45s ease, margin 0.5s var(--yay);
}

.ders-karo:hover p,
.ders-karo:focus-visible p,
.ders-karo:focus-within p {
	max-height: 7rem;
	opacity: 1;
	margin-top: 0.15rem;
}

.ders-kimler {
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(253, 60, 61, 0.16);
	box-shadow: inset 0 0 0 1px rgba(253, 60, 61, 0.55);
	color: var(--kirmizi-parlak);
	font-size: 0.85rem;
	font-weight: 700;
	backdrop-filter: blur(6px);
}

/* ---------- Galeri ---------- */

.galeri-bolum {
	background:
		radial-gradient(90% 110% at 85% 10%, rgba(232, 184, 75, 0.07), transparent 60%),
		var(--siyah);
}

/*
 * Karolar eşit boyutta ve oran sabit. Altı fotoğraf üç sütunda iki, iki
 * sütunda üç tam satır yapar; hiçbir ekranda satır yarım kalmaz.
 */
.galeri {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.6rem, 1.2vw, 1rem);
}

.galeri-karo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--yuvarlak-kucuk);
	box-shadow: inset 0 0 0 1px var(--cizgi);
	background: var(--yuzey);
}

.galeri-karo img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 1.1s var(--yay), filter 0.5s ease;
	filter: contrast(1.02) brightness(1);
}

.galeri-karo:hover img,
.galeri-karo:focus-within img {
	transform: scale(1.07);
	filter: contrast(1.04) brightness(1.04);
}

.galeri-karo figcaption {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1.6rem 1rem 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--beyaz);
	background: linear-gradient(to top, rgba(18, 18, 24, 0.9), transparent);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s var(--yay);
}

.galeri-karo:hover figcaption,
.galeri-karo:focus-within figcaption {
	opacity: 1;
	transform: none;
}

/* ---------- Slogan bandı ---------- */

.band {
	position: relative;
	min-height: clamp(320px, 46vw, 560px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--siyah);
}

.band-gorsel {
	position: absolute;
	inset: -16% 0;
	z-index: 0;
	will-change: transform;
}

.band-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: contrast(1.04) brightness(0.9);
}

.band-perde {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, rgba(12, 12, 18, 0.74) 0%, rgba(12, 12, 18, 0.2) 55%, rgba(12, 12, 18, 0.55) 100%),
		linear-gradient(to bottom, var(--siyah) 0%, transparent 18%, transparent 82%, var(--siyah) 100%);
}

.band-ic {
	position: relative;
	z-index: 2;
	width: 100%;
}

.band-slogan {
	font-family: var(--baslik);
	font-size: clamp(1.9rem, 6vw, 4.4rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	font-variation-settings: "wdth" 114;
	margin: 0;
	max-width: 16ch;
	overflow-wrap: break-word;
	background: linear-gradient(96deg, #ffffff 30%, var(--kirmizi-parlak) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Ekip ---------- */

/* Kart genişliği kişi sayısından bağımsız sabit kalsın, küme ortalansın.
   Sabit üç sütun olsaydı, iki kişi kaldığında sağda boşluk kalıyordu. */
.ekip-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 340px));
	justify-content: center;
	/* Kartlar içeriği kadar yükselsin. Eşit yükseklikte kısa metinli kartın
	   altı boş kalıyor ve içerik eksikmiş gibi duruyordu. */
	align-items: start;
	gap: clamp(1.25rem, 2.6vw, 2.1rem);
}

.ekip-kisi {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1rem, 1.8vw, 1.35rem);
	border-radius: var(--yuvarlak);
	background: linear-gradient(165deg, var(--yuzey-2), var(--yuzey));
	box-shadow: inset 0 0 0 1px var(--cizgi);
	transition: transform 0.45s var(--yay), box-shadow 0.45s var(--yay);
}

.ekip-kisi:hover {
	transform: translateY(-6px);
	box-shadow: inset 0 0 0 1px var(--cizgi-parlak), 0 26px 55px -26px rgba(0, 0, 0, 0.95);
}

.ekip-portre {
	overflow: hidden;
	border-radius: var(--yuvarlak-kucuk);
}

.ekip-portre img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.9s var(--yay);
}

.ekip-kisi:hover .ekip-portre img {
	transform: scale(1.06);
}

.ekip-bilgi h3 {
	margin: 0 0 0.15rem;
	text-transform: uppercase;
	font-variation-settings: "wdth" 108;
}

.ekip-unvan {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--kirmizi-parlak);
	margin: 0 0 1rem;
	letter-spacing: 0.01em;
}

.ekip-soz {
	margin: 0 0 1rem;
	padding-left: 0.95rem;
	border-left: 3px solid var(--altin);
	font-size: 1rem;
	font-style: italic;
	color: #e8e8f0;
}

.ekip-metin {
	color: var(--gri);
	font-size: 0.99rem;
}

.ekip-metin p:last-child {
	margin-bottom: 0;
}

.ekip-tek {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* ---------- Haberler ---------- */

.haber-liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.4rem, 2.8vw, 2.1rem);
}

.haber {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.haber-gorsel {
	overflow: hidden;
	border-radius: var(--yuvarlak);
}

.haber-gorsel img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.9s var(--yay);
}

.haber:hover .haber-gorsel img {
	transform: scale(1.07);
}

.haber-tarih {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--altin);
}

.haber h3 {
	margin: 0;
	font-size: clamp(1.18rem, 1.9vw, 1.42rem);
	line-height: 1.22;
}

.haber h3 a {
	text-decoration: none;
	background-image: linear-gradient(var(--kirmizi), var(--kirmizi));
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.45s var(--yay);
}

.haber h3 a:hover {
	background-size: 100% 2px;
}

.haber p {
	margin: 0;
	color: var(--gri);
	font-size: 0.99rem;
}

.haber-liste-genis {
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}

.haber-liste-genis .haber {
	flex-direction: row;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--cizgi);
}

.haber-liste-genis .haber:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.haber-liste-genis .haber-gorsel {
	flex: 0 0 clamp(180px, 28%, 300px);
}

/* ---------- Yorumlar ---------- */

.yorum-izgara {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.yorum-tek {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: clamp(1.5rem, 2.6vw, 2.1rem);
	border-radius: var(--yuvarlak);
	background: linear-gradient(165deg, var(--yuzey-2), var(--yuzey));
	box-shadow: inset 0 0 0 1px var(--cizgi);
	overflow: hidden;
	transition: transform 0.45s var(--yay), box-shadow 0.45s var(--yay);
}

.yorum-tek::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--kirmizi), var(--altin));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 0.6s var(--yay);
}

.yorum-tek:hover {
	transform: translateY(-5px);
	box-shadow: inset 0 0 0 1px var(--cizgi-parlak), 0 26px 55px -26px rgba(0, 0, 0, 0.95);
}

.yorum-tek:hover::before {
	transform: scaleX(1);
}

.yorum-metin {
	margin: 0;
	font-size: 1.04rem;
	line-height: 1.68;
	color: #dcdce8;
	max-width: none;
}

.yorum-kisi {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: auto;
	padding-top: 0.4rem;
}

.yorum-kisi img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 50%;
}

.yorum-ad {
	font-weight: 700;
	line-height: 1.25;
}

.yorum-rol {
	display: block;
	font-size: 0.86rem;
	font-weight: 400;
	color: var(--gri-koyu);
}

.puan {
	display: inline-flex;
	gap: 4px;
}

.puan-isaret {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

.puan-isaret.dolu {
	background: var(--altin);
	box-shadow: 0 0 10px -1px rgba(232, 184, 75, 0.75);
}

/* ---------- İletişim ---------- */

.iletisim-izgara {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.iletisim-tel {
	display: inline-block;
	font-family: var(--baslik);
	/* Cam panelin içinde kaldığı için numara tek satırda kalmalı; panel
	   daraldığında ikiye bölünüyordu. */
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	white-space: nowrap;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.035em;
	font-variation-settings: "wdth" 112;
	text-decoration: none;
	margin: 0 0 0.4rem;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(115deg, var(--beyaz) 35%, var(--kirmizi-parlak));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: filter 0.35s ease;
}

.iletisim-tel:hover {
	filter: brightness(1.25) drop-shadow(0 0 18px rgba(253, 60, 61, 0.45));
}

.iletisim-satir {
	margin: 0 0 1.6rem;
}

.iletisim-etiket {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gri-koyu);
	margin-bottom: 0.3rem;
	letter-spacing: 0.02em;
}

.iletisim-uyari {
	padding: 1.15rem 1.35rem;
	border-radius: var(--yuvarlak-kucuk);
	background: rgba(232, 184, 75, 0.1);
	box-shadow: inset 0 0 0 1px rgba(232, 184, 75, 0.4);
	color: #f0e2bd;
	margin-bottom: 1.9rem;
	font-weight: 500;
}

.iletisim-uyari p {
	margin: 0;
	max-width: none;
}

.harita {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: var(--yuvarlak);
	box-shadow: inset 0 0 0 1px var(--cizgi);
	filter: contrast(1.03);
}

/* ---------- Sayfa içeriği ---------- */

.sayfa-basligi {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 8vw, 6.5rem);
	background:
		radial-gradient(90% 140% at 12% 0%, rgba(253, 60, 61, 0.2), transparent 58%),
		var(--siyah);
}

.sayfa-basligi h1 {
	font-size: clamp(2.3rem, 6.5vw, 4.4rem);
	margin: 0;
	max-width: 20ch;
	text-transform: uppercase;
	font-variation-settings: "wdth" 114;
}

.sayfa-basligi p {
	margin: 0.8rem 0 0;
	color: var(--gri);
	font-size: 1.12rem;
}

.icerik {
	max-width: var(--olcu-dar);
	color: #d3d3e0;
}

.icerik h2,
.icerik h3 {
	margin-top: 1.7em;
	color: var(--beyaz);
}

.icerik img {
	margin-block: 1.6rem;
	border-radius: var(--yuvarlak);
}

.icerik ul,
.icerik ol {
	max-width: var(--olcu-dar);
	padding-left: 1.2rem;
}

.icerik li {
	margin-bottom: 0.45rem;
}

.icerik blockquote {
	margin: 1.8rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--yuzey);
	border-left: 4px solid var(--altin);
	border-radius: var(--yuvarlak-kucuk);
	font-size: 1.1rem;
	font-style: italic;
	color: var(--beyaz);
}

.icerik blockquote p:last-child {
	margin-bottom: 0;
}

/* ---------- Ders / haber ayrıntısı ---------- */

.haber-kapak {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	overflow: hidden;
	border-radius: var(--yuvarlak);
}

.haber-kapak img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

.kunye {
	margin: 0 0 2rem;
	max-width: var(--olcu-dar);
	border-top: 1px solid var(--cizgi);
}

.kunye div {
	display: grid;
	grid-template-columns: minmax(110px, 32%) 1fr;
	gap: 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--cizgi);
}

.kunye dt {
	font-size: 0.9rem;
	color: var(--gri-koyu);
	margin: 0;
}

.kunye dd {
	margin: 0;
	font-weight: 600;
}

.haber-gezinme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
	border-top: 1px solid var(--cizgi);
}

.haber-gezinme a {
	text-decoration: none;
	font-family: var(--baslik);
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.22;
}

.haber-gezinme a:hover {
	color: var(--kirmizi-parlak);
}

.sayfa-baglantilari {
	margin-top: 2rem;
	font-weight: 600;
}

.bolum-eylem {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	max-width: none;
}

/* ---------- Alt bilgi ---------- */

.site-alti {
	position: relative;
	overflow: hidden;
	background: var(--siyah);
	color: #c9c9d8;
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
	border-top: 1px solid var(--cizgi);
}

.site-alti::before {
	content: "";
	position: absolute;
	width: 70vw;
	height: 40vw;
	left: -10vw;
	bottom: -22vw;
	background: radial-gradient(circle, rgba(253, 60, 61, 0.14), transparent 62%);
	filter: blur(40px);
	pointer-events: none;
}

.site-alti .kap {
	position: relative;
	z-index: 1;
}

.alti-izgara {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 2.5rem;
}

.alti-slogan {
	font-family: var(--baslik);
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	font-variation-settings: "wdth" 110;
	margin: 1rem 0 0;
	max-width: 20ch;
	background: linear-gradient(100deg, var(--kirmizi), var(--altin));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.site-alti h4 {
	color: #fff;
	margin-bottom: 0.85rem;
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.alti-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.97rem;
}

.alti-liste li {
	margin-bottom: 0.5rem;
}

.alti-liste a {
	text-decoration: none;
	transition: color 0.25s ease, padding-left 0.3s var(--yay);
}

.alti-liste a:hover {
	color: var(--kirmizi-parlak);
	padding-left: 5px;
}

.alti-telif {
	padding-top: 1.75rem;
	border-top: 1px solid var(--cizgi);
	font-size: 0.86rem;
	color: var(--gri-koyu);
}

.alti-telif p {
	margin: 0;
	max-width: none;
}

/* ---------- Yer tutucu ---------- */

.gorsel-yok {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--yuvarlak-kucuk);
	background:
		linear-gradient(110deg, var(--yuzey) 30%, var(--yuzey-2) 50%, var(--yuzey) 70%)
		0 0 / 220% 100%;
	animation: parilti 2.4s ease-in-out infinite;
}

.ekip-portre .gorsel-yok {
	aspect-ratio: 4 / 5;
}

@keyframes parilti {
	from { background-position: 180% 0; }
	to { background-position: -80% 0; }
}

/* ---------- Sayfalama ---------- */

.sayfalama {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.sayfalama .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding-inline: 0.7rem;
	border-radius: 999px;
	background: var(--yuzey);
	box-shadow: inset 0 0 0 1px var(--cizgi);
	text-decoration: none;
	font-weight: 700;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--yay);
}

.sayfalama .page-numbers.current,
.sayfalama .page-numbers:hover {
	background: var(--kirmizi);
	box-shadow: 0 12px 30px -12px rgba(253, 60, 61, 0.8);
	transform: translateY(-2px);
	color: #fff;
}

/* ---------- Kaydırmada beliren ögeler ---------- */

[data-belir] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.75s var(--yay), transform 0.75s var(--yay);
	will-change: opacity, transform;
}

[data-belir].belirdi {
	opacity: 1;
	transform: none;
}

/* ---------- Duyarlılık ---------- */

@media (max-width: 1040px) {
	.ekip-liste,
	.haber-liste {
		grid-template-columns: repeat(2, 1fr);
	}

	/* İki sütunda altı fotoğraf üç tam satır yapar. */
	.galeri {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 880px) {
	.iletisim-izgara,
	.alti-izgara {
		grid-template-columns: 1fr;
	}

	.yorum-izgara {
		grid-template-columns: 1fr;
	}

	.ekip-tek {
		grid-template-columns: 1fr;
	}

	.ekip-tek .ekip-portre {
		max-width: 340px;
	}
}

@media (max-width: 720px) {
	.menu-dugmesi {
		display: block;
	}

	.basligi-tel {
		display: none;
	}

	.ana-menu {
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 1.2rem;
		padding: 2rem var(--gutter);
		background: rgba(18, 18, 24, 0.97);
		backdrop-filter: blur(18px);
		transform: translateX(100%);
		transition: transform 0.45s var(--yay);
		z-index: 95;
	}

	.ana-menu.acik {
		transform: translateX(0);
	}

	.ana-menu a {
		font-family: var(--baslik);
		font-size: 2rem;
		font-weight: 800;
		text-transform: uppercase;
		font-variation-settings: "wdth" 108;
	}

	.menu-kapat {
		position: absolute;
		top: 1rem;
		right: var(--gutter);
		background: none;
		border: 0;
		color: var(--beyaz);
		padding: 0.5rem;
		cursor: pointer;
	}

	.ders-izgara,
	.ekip-liste,
	.haber-liste {
		grid-template-columns: 1fr;
	}

	.haber-liste-genis .haber {
		flex-direction: column;
	}

	.haber-liste-genis .haber-gorsel {
		flex: none;
	}

	/* Dokunmatikte üstüne gelme yok: ders açıklaması hep görünsün */
	.ders-yazi p {
		max-height: 7rem;
		opacity: 1;
	}
}

@media (min-width: 721px) {
	.menu-kapat {
		display: none;
	}
}

@media (max-width: 480px) {
	.adimlar {
		grid-template-columns: 1fr;
	}

	.adimlar::before {
		display: none;
	}
}

/* Çok dar ekranlarda afiş başlığındaki uzun kelimeler taşıyordu
   ("GEREKMİYOR." gibi). Punto küçültülüyor, ayrıca son çare olarak
   kelime kırılmasına izin veriliyor. */
@media (max-width: 420px) {
	/*
	 * Bu küçültme, başlığın uzun bir cümle olduğu döneme aitti. Artık başlık
	 * kısa ve dar dizgili iki satır; dar ekranda da afiş ölçeğinde durabilir.
	 * Heceleme kapalı: "BAŞARAN" ortadan bölünmesin.
	 */
	.afis-ad {
		font-size: clamp(3rem, 15vw, 4.5rem);
		overflow-wrap: break-word;
		hyphens: none;
	}

	.sayfa-basligi h1 {
		font-size: clamp(1.9rem, 8.6vw, 2.6rem);
		overflow-wrap: break-word;
	}

	h2 {
		overflow-wrap: break-word;
	}
}

/* ---------- Hareket azaltma ----------
   Bu tercihi açan kullanıcıda bütün hareket durur; içerik olduğu gibi kalır. */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	[data-belir],
	.kelime > span,
	.afis-rozet,
	.afis-metin,
	.afis-eylem,
	.afis-yer {
		opacity: 1 !important;
		transform: none !important;
	}

	.afis-gorsel img {
		animation: none !important;
	}
}

/* ==========================================================================
   Antrenman Programı sihirbazı
   Sayfa: page-antrenman-programi.php · Betik: assets/js/antrenman.js
   ========================================================================== */

.ap-baslik .ap-ustbaslik {
	margin: 0 0 0.7rem;
	font-size: 0.86rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--kirmizi-parlak);
}

/*
 * Sayfanın tamamı için TEK sürekli arka plan fotoğrafı + tek tip koyu perde.
 * Başlığa ayrı, gövdeye ayrı foto konunca birleşme yerinde çirkin bir "katman"
 * çizgisi oluşuyordu. Artık foto .ap-sayfa sarmalında; başlık ve gövde şeffaf,
 * geçiş yumuşak, kesme yok. Perde üstte açık (foto görünür), alta doğru koyulaşır
 * (form okunur kalır).
 */
.ap-sayfa {
	position: relative;
	isolation: isolate;
}

.ap-sayfa::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--ap-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: contrast(1.05);
}

.ap-sayfa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 45% at 50% 0%, rgba(253, 60, 61, 0.16), transparent 60%),
		linear-gradient(180deg, rgba(18, 18, 24, 0.62) 0%, rgba(18, 18, 24, 0.80) 45%, rgba(18, 18, 24, 0.92) 100%);
}

/* Başlık ve gövde arka planı şeffaf: alttaki tek foto görünsün. */
.ap-baslik,
.ap-govde {
	background: transparent;
}

/* ---------- Form kabı ---------- */

.ap-form {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(1.4rem, 3.5vw, 2.6rem);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);
}

.ap-ilerleme {
	height: 6px;
	border-radius: 999px;
	background: var(--yuzey-2);
	overflow: hidden;
}

.ap-ilerleme-dolu {
	display: block;
	width: 33%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kirmizi-koyu), var(--kirmizi), var(--kirmizi-parlak));
	transition: width 0.55s var(--yay);
}

.ap-adim-say {
	margin: 0.7rem 0 1.6rem;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gri-koyu);
}

/* Adımlar: JS hazırsa yalnızca etkin adım görünür. JS yoksa hepsi görünür. */
.ap-adim {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ap-form.js-hazir .ap-adim {
	display: none;
}

.ap-form.js-hazir .ap-adim.etkin {
	display: block;
	animation: apGir 0.5s var(--yay);
}

@keyframes apGir {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.ap-legend {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 1.3rem;
	font-family: var(--baslik);
	font-size: clamp(1.4rem, 3.2vw, 1.9rem);
	font-weight: 800;
	font-variation-settings: "wdth" 110;
	color: var(--beyaz);
}

/* ---------- Alanlar ---------- */

.ap-alan {
	display: block;
	margin-bottom: 1.5rem;
}

.ap-alan:last-child {
	margin-bottom: 0;
}

.ap-etiket {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--beyaz);
}

.ap-etiket small {
	font-weight: 600;
	color: var(--gri-koyu);
}

.ap-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.ap-alan input[type="number"] {
	width: 100%;
	padding: 0.9rem 1rem;
	font-family: var(--metin);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--beyaz);
	background: var(--siyah);
	border: 1px solid var(--cizgi-parlak);
	border-radius: var(--yuvarlak-kucuk);
	appearance: textfield;
	-moz-appearance: textfield;
	transition: border-color 0.25s var(--yay), box-shadow 0.25s var(--yay);
}

.ap-alan input[type="number"]::-webkit-outer-spin-button,
.ap-alan input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ap-alan input[type="number"]::placeholder {
	color: var(--gri-koyu);
	font-weight: 500;
}

.ap-alan input[type="number"]:focus {
	outline: none;
	border-color: var(--kirmizi);
	box-shadow: 0 0 0 3px rgba(253, 60, 61, 0.28);
}

/* ---------- Seçim kartları (radio / checkbox) ---------- */

.ap-secenekler {
	display: grid;
	gap: 0.7rem;
}

.ap-secenekler-satir {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.ap-gun {
	grid-template-columns: repeat(5, 1fr);
	grid-auto-flow: row;
}

.ap-secim {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	background: var(--siyah);
	border: 1px solid var(--cizgi-parlak);
	border-radius: var(--yuvarlak-kucuk);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s var(--yay), background 0.2s var(--yay), transform 0.2s var(--yay);
}

.ap-secim:hover {
	border-color: var(--kirmizi-parlak);
	transform: translateY(-2px);
}

.ap-secim input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Görsel işaret (nokta / kutu). */
.ap-secim > span {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-weight: 700;
	color: var(--beyaz);
	line-height: 1.3;
}

.ap-secim > span small {
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--gri);
}

.ap-secim::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 2px solid var(--cizgi-parlak);
	transition: border-color 0.2s var(--yay), background 0.2s var(--yay), box-shadow 0.2s var(--yay);
}

.ap-secenekler-satir .ap-secim,
.ap-secenekler-satir .ap-secim {
	justify-content: center;
}

/* Satır düzenindeki kısa seçeneklerde işaret gizli, ortalı metin. */
.ap-secenekler-satir .ap-secim::before,
.ap-gun .ap-secim::before {
	display: none;
}

.ap-secenekler-satir .ap-secim > span,
.ap-gun .ap-secim > span {
	align-items: center;
	text-align: center;
}

.ap-secim:has(input:checked) {
	border-color: var(--kirmizi);
	background: linear-gradient(180deg, rgba(253, 60, 61, 0.16), rgba(253, 60, 61, 0.05));
	box-shadow: 0 0 0 1px var(--kirmizi), 0 10px 30px -18px rgba(253, 60, 61, 0.9);
}

.ap-secim:has(input:checked)::before {
	border-color: var(--kirmizi);
	background: var(--kirmizi);
	box-shadow: inset 0 0 0 3px var(--siyah);
}

.ap-secim:has(input:focus-visible) {
	outline: 2px solid var(--kirmizi-parlak);
	outline-offset: 2px;
}

/* :has desteklemeyen tarayıcı için yedek: JS checked sınıfı yerine, en
   azından kenarlık odakta belirginleşsin. */
.ap-secim input:focus-visible {
	outline: none;
}

.ap-ipucu {
	margin: -0.4rem 0 1.2rem;
	font-size: 0.95rem;
	color: var(--gri);
}

/* ---------- Hata ve butonlar ---------- */

.ap-hata {
	margin-top: 1.3rem;
	padding: 0.85rem 1.1rem;
	background: rgba(253, 60, 61, 0.14);
	border: 1px solid var(--kirmizi);
	border-radius: var(--yuvarlak-kucuk);
	color: var(--kirmizi-parlak);
	font-weight: 600;
}

.ap-butonlar {
	display: flex;
	gap: 0.8rem;
	margin-top: 1.8rem;
}

.ap-butonlar .ap-ileri,
.ap-butonlar .ap-olustur {
	margin-left: auto;
}

/* ---------- Sonuç ---------- */

.ap-sonuc {
	max-width: 900px;
	margin: 2.5rem auto 0;
}

.ap-sonuc-ic {
	display: grid;
	gap: 1.1rem;
}

.ap-kart {
	padding: clamp(1.3rem, 3vw, 2rem);
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
}

/* Kartlar sırayla belirir. */
.ap-sonuc .ap-kart {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--yay), transform 0.6s var(--yay);
}

.ap-sonuc.gorunur .ap-kart {
	opacity: 1;
	transform: none;
}

.ap-sonuc-bas {
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(253, 60, 61, 0.18), transparent 55%),
		var(--yuzey);
	border-color: var(--cizgi-parlak);
}

.ap-rozet {
	display: inline-block;
	margin-bottom: 0.7rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kirmizi-parlak);
	background: rgba(253, 60, 61, 0.12);
	border: 1px solid rgba(253, 60, 61, 0.4);
	border-radius: 999px;
}

.ap-sonuc-bas h2 {
	margin: 0 0 0.4rem;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: var(--beyaz);
}

.ap-sonuc-bas p {
	margin: 0;
	color: var(--gri);
	font-size: 1.06rem;
}

/* Profil özeti */
.ap-ozet {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	text-align: center;
}

.ap-ozet-oge {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.ap-ozet-et {
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gri-koyu);
	font-weight: 700;
}

.ap-ozet-dg {
	font-family: var(--baslik);
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	font-weight: 800;
	color: var(--kirmizi-parlak);
}

.ap-bilgi p {
	margin: 0 0 0.7rem;
	color: var(--gri);
	line-height: 1.6;
}

.ap-bilgi p:last-child {
	margin-bottom: 0;
}

.ap-bilgi strong {
	color: var(--beyaz);
}

.ap-alt-baslik {
	margin: 0 0 1.1rem;
	font-size: 1.3rem;
	color: var(--beyaz);
}

/* Haftalık plan */
.ap-hafta {
	display: grid;
	gap: 0.55rem;
}

.ap-gun-satir {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-areas: "ad odak" "ad ozet";
	gap: 0.1rem 1rem;
	padding: 0.85rem 1.1rem;
	background: var(--siyah);
	border-left: 3px solid var(--kirmizi);
	border-radius: var(--yuvarlak-kucuk);
}

.ap-gun-satir.dinlenme {
	border-left-color: var(--cizgi-parlak);
	opacity: 0.72;
}

.ap-gun-ad {
	grid-area: ad;
	align-self: center;
	font-family: var(--baslik);
	font-weight: 800;
	font-variation-settings: "wdth" 108;
	color: var(--beyaz);
}

.ap-gun-odak {
	grid-area: odak;
	font-weight: 700;
	color: var(--kirmizi-parlak);
}

.ap-gun-satir.dinlenme .ap-gun-odak {
	color: var(--gri);
}

.ap-gun-ozet {
	grid-area: ozet;
	font-size: 0.9rem;
	color: var(--gri-koyu);
}

/* Seans akışları */
.ap-seans-izgara {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ap-seans {
	padding: 1.1rem 1.2rem;
	background: var(--siyah);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-kucuk);
}

.ap-seans.dusuk {
	border-style: dashed;
}

.ap-seans-bas {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--cizgi);
}

.ap-seans-bas h4 {
	margin: 0;
	font-size: 1.05rem;
	color: var(--beyaz);
}

.ap-seans-sure {
	flex: 0 0 auto;
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--kirmizi-parlak);
	background: rgba(253, 60, 61, 0.12);
	border-radius: 999px;
}

.ap-blok-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.ap-blok-liste li {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 0.7rem;
	align-items: start;
}

.ap-blok-dk {
	font-family: var(--baslik);
	font-weight: 800;
	font-size: 0.95rem;
	color: var(--altin);
	text-align: right;
	padding-top: 0.05rem;
}

.ap-blok-govde {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.ap-blok-ad {
	font-weight: 700;
	color: var(--beyaz);
	font-size: 0.96rem;
}

.ap-blok-ac {
	font-size: 0.86rem;
	color: var(--gri);
	line-height: 1.45;
}

/* Notlar */
.ap-notlar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.7rem;
}

.ap-notlar li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--gri);
	line-height: 1.55;
}

.ap-notlar li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--kirmizi);
}

/* CTA */
.ap-cta {
	text-align: center;
	background:
		radial-gradient(100% 120% at 50% 0%, rgba(253, 60, 61, 0.16), transparent 60%),
		var(--yuzey);
	border-color: var(--cizgi-parlak);
}

.ap-cta h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	color: var(--beyaz);
}

.ap-cta p {
	max-width: 52ch;
	margin: 0 auto 1.4rem;
	color: var(--gri);
	line-height: 1.6;
}

.ap-cta strong {
	color: var(--beyaz);
}

.ap-cta-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
}

.ap-noscript {
	max-width: 760px;
	margin: 1.5rem auto 0;
	padding: 1rem 1.2rem;
	background: var(--yuzey);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-kucuk);
	color: var(--gri);
	text-align: center;
}

.ap-noscript a {
	color: var(--kirmizi-parlak);
}

/* ---------- Küçük ekran ---------- */

@media (max-width: 640px) {
	.ap-ozet {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem 1rem;
	}

	.ap-seans-izgara {
		grid-template-columns: 1fr;
	}

	.ap-gun {
		grid-template-columns: repeat(3, 1fr);
	}

	.ap-gun-satir {
		grid-template-columns: 96px 1fr;
	}

	.ap-butonlar {
		flex-wrap: wrap;
	}

	.ap-butonlar .dugme {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (max-width: 400px) {
	.ap-grid-3 {
		grid-template-columns: 1fr;
	}

	.ap-secenekler-satir {
		grid-auto-flow: row;
	}
}

/* Hareket azaltma: geçişler kapansın, her şey görünür kalsın. */
@media (prefers-reduced-motion: reduce) {
	.ap-form.js-hazir .ap-adim.etkin {
		animation: none !important;
	}

	.ap-sonuc .ap-kart {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Ana sayfa: Antrenman Programı tanıtım bloğu (parts/arac-cta.php)
   ========================================================================== */

.arac-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 3.6rem);
	border-radius: var(--yuvarlak);
	border: 1px solid var(--cizgi-parlak);
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(253, 60, 61, 0.28), transparent 55%),
		radial-gradient(80% 120% at 0% 100%, rgba(237, 196, 95, 0.12), transparent 55%),
		linear-gradient(180deg, var(--yuzey), var(--siyah));
}

.arac-cta-ic {
	position: relative;
	z-index: 1;
	max-width: 40rem;
}

.arac-cta-etiket {
	margin: 0 0 0.7rem;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--kirmizi-parlak);
}

.arac-cta h2 {
	margin: 0 0 0.8rem;
	font-size: clamp(1.7rem, 4.5vw, 2.8rem);
	line-height: 1.05;
	color: var(--beyaz);
	text-transform: uppercase;
	font-variation-settings: "wdth" 112;
}

.arac-cta-metin {
	margin: 0 0 1.6rem;
	color: var(--gri);
	font-size: 1.08rem;
	line-height: 1.6;
	max-width: 46ch;
}

/* Sağdaki dekoratif "program" rozetleri; dar ekranda gizlenir. */
.arac-cta-susleme {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 0.7rem;
	flex: 0 0 auto;
}

.arac-cta-susleme span {
	display: grid;
	place-items: center;
	min-width: 74px;
	padding: 0.9rem 0.6rem;
	font-family: var(--baslik);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--beyaz);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-kucuk);
	transform: rotate(-4deg);
}

.arac-cta-susleme span:nth-child(2) { transform: rotate(3deg); color: var(--kirmizi-parlak); }
.arac-cta-susleme span:nth-child(3) { transform: rotate(-2deg); }
.arac-cta-susleme span:nth-child(4) { transform: rotate(4deg); color: var(--altin); }
.arac-cta-susleme span:nth-child(5) { transform: rotate(-3deg); }

@media (max-width: 820px) {
	.arac-cta {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.arac-cta-susleme {
		display: none;
	}
}



/* ==========================================================================
   Dokunmatik (mobil) aydınlatma
   Masaüstünde görseller "üzerine gelince" renklenip aydınlanıyor; mobilde
   hover olmadığı için görseller sürekli koyu gri kalıp siteyi "kapkara"
   gösteriyordu. Dokunmatik cihazlarda: görseller doğrudan renkli ve aydınlık,
   zeminler bir kademe açık, koyu perdeler biraz gevşek.
   ========================================================================== */
@media (hover: none) {
	/* Renk paleti artık ana :root içinde açıldı (her cihazda aynı ton).
	   Burada ayrıca renk tanımı YOK; olsaydı mobili masaüstünden koyu bırakırdı. */

	/* Görseller parlak ve doygun: mobilde site "canlı" görünsün. */
	.ders-karo img,
	.galeri-karo img {
		filter: contrast(1.05) saturate(1.16) brightness(1.06);
	}

	.band-gorsel img,
	.afis-gorsel img {
		filter: contrast(1.04) saturate(1.14) brightness(1.05);
	}

	.harita {
		filter: contrast(1.03) saturate(1.08);
	}

	/* Galeri başlıkları hover ile açılıyordu; mobilde hep görünür. */
	.galeri-karo figcaption {
		opacity: 1;
		transform: none;
	}

	/*
	 * Koyu perdeler minimuma indirildi — fotoğraflar kararmasın. Yazı
	 * okunurluğu artık perdeyle değil METİN GÖLGESİYLE sağlanıyor.
	 * Degrade (background-clip: text) başlıklarda text-shadow işe yaramaz,
	 * onlarda drop-shadow kullanılıyor.
	 */
	.afis-perde {
		background:
			linear-gradient(to right, rgba(12, 12, 18, 0.5) 0%, rgba(12, 12, 18, 0.2) 48%, rgba(12, 12, 18, 0) 78%, rgba(12, 12, 18, 0.14) 100%),
			linear-gradient(to top, var(--siyah) 0%, rgba(12, 12, 18, 0) 24%);
	}

	.afis-ad,
	.afis-altbaslik,
	.afis-slogan,
	.afis-metin,
	.afis-yer {
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.55);
	}

	/*
	 * Kırmızı slogan, fotoğrafın açık gri bölgesine denk geldiğinde
	 * eriyordu. Kırmızıyı bozmadan arkasına koyu bir hale konuyor.
	 */
	.afis-slogan {
		text-shadow:
			0 0 14px rgba(0, 0, 0, 0.9),
			0 0 4px rgba(0, 0, 0, 0.95),
			0 1px 2px rgba(0, 0, 0, 0.9);
	}

	.band-perde {
		background:
			linear-gradient(to right, rgba(12, 12, 18, 0.42) 0%, rgba(12, 12, 18, 0.04) 55%, rgba(12, 12, 18, 0.22) 100%),
			linear-gradient(to bottom, var(--siyah) 0%, transparent 16%, transparent 88%, var(--siyah) 100%);
	}

	.band-slogan {
		filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.8));
	}

	/* Ders kartında yalnızca başlığın olduğu alt şerit koyu kalsın. */
	.ders-karo::after {
		background: linear-gradient(to top, rgba(12, 12, 18, 0.88) 3%, rgba(12, 12, 18, 0) 46%);
	}

	/* İletişim ve araç sayfası: içerik zaten panel/kart üstünde duruyor. */
	.iletisim-bolum::after {
		background:
			radial-gradient(70% 55% at 85% 4%, rgba(253, 60, 61, 0.14), transparent 60%),
			linear-gradient(180deg, rgba(20, 20, 27, 0.62) 0%, rgba(20, 20, 27, 0.22) 34%, rgba(20, 20, 27, 0.3) 100%);
	}

	.ap-sayfa::after {
		background:
			radial-gradient(70% 45% at 50% 0%, rgba(253, 60, 61, 0.16), transparent 60%),
			linear-gradient(180deg, rgba(18, 18, 24, 0.6) 0%, rgba(18, 18, 24, 0.42) 40%, rgba(18, 18, 24, 0.6) 100%);
	}

	/* Fotoğraf üzerine gelen başlıklar okunur kalsın. */
	.iletisim-bolum .bolum-basligi h2 {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.85));
	}

	.iletisim-bolum .bolum-basligi p,
	.ap-baslik h1,
	.ap-baslik p,
	.ap-ustbaslik {
		text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
	}
}

/* ==========================================================================
   İletişim bölümü arka plan fotoğrafı (parts/iletisim.php)
   Tek foto + koyu perde; yazı ve harita okunur kalır.
   ========================================================================== */
.iletisim-bolum {
	position: relative;
	isolation: isolate;
}

.iletisim-bolum::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--il-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: contrast(1.04);
}

.iletisim-bolum::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Yazılar cam panelde durduğu için perde yumuşak: üstte başlık için biraz
	   koyu, aşağıda fotoğraf backdrop olarak görünür. */
	background:
		radial-gradient(70% 55% at 85% 4%, rgba(253, 60, 61, 0.16), transparent 60%),
		linear-gradient(180deg, rgba(20, 20, 27, 0.82) 0%, rgba(20, 20, 27, 0.5) 32%, rgba(20, 20, 27, 0.58) 100%);
}

/* İletişim bilgileri cam panelde: fotoğrafın üstünde temiz ve okunur durur. */
.iletisim-panel {
	align-self: start;
	padding: clamp(1.4rem, 3vw, 2.1rem);
	background: rgba(26, 26, 34, 0.62);
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	border: 1px solid var(--cizgi-parlak);
	border-radius: var(--yuvarlak);
}

/* ==========================================================================
   Mobil ince ayarlar
   ========================================================================== */
@media (max-width: 860px) {
	/*
	 * İletişim bölümü mobilde çok uzun (içerik alt alta diziliyor). Tüm alanı
	 * "cover" ile kaplayan fotoğraf aşırı yakınlaşıp bulanıklaşıyordu.
	 * Fotoğraf artık üstte bir şerit olarak duruyor ve aşağı doğru zemine
	 * karışıyor; net kalıyor.
	 */
	.iletisim-bolum::before,
	.iletisim-bolum::after {
		inset: 0 0 auto 0;
		height: min(62vh, 470px);
	}

	.iletisim-bolum::before {
		-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
	}
}

@media (max-width: 520px) {
	/*
	 * Afiş düğmeleri: "Randevu için ara" etiketi ikiye bölünüp düğmeyi
	 * bozuyordu. Düğmeler tam genişlik; etiket ve numara alt alta, ortalı.
	 */
	.afis-eylem {
		flex-direction: column;
		align-items: stretch;
	}

	.afis-eylem .dugme {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		text-align: center;
	}
}

/* ==========================================================================
   Antrenman Programı — "cıvıl cıvıl" renklendirme
   Her antrenman türünün kendi rengi (--odak-renk) ve simgesi var; sayfa tek
   kırmızı yerine çok renkli ve hareketli görünüyor.
   ========================================================================== */

/* Sayfa perdesi açıldı + renkli ışık lekeleri eklendi. */
.ap-sayfa::after {
	background:
		radial-gradient(58% 40% at 14% 4%, rgba(253, 60, 61, 0.22), transparent 62%),
		radial-gradient(52% 38% at 86% 22%, rgba(70, 201, 229, 0.16), transparent 62%),
		radial-gradient(48% 34% at 62% 92%, rgba(242, 193, 78, 0.14), transparent 62%),
		linear-gradient(180deg, rgba(18, 18, 24, 0.58) 0%, rgba(18, 18, 24, 0.70) 45%, rgba(18, 18, 24, 0.82) 100%);
}

/* Form ve sonuç başlığına renkli şerit. */
.ap-form,
.ap-sonuc-bas {
	position: relative;
	overflow: hidden;
}

.ap-form::before,
.ap-sonuc-bas::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #ff5a5b, #ff9f45, #f2c14e, #7ddc8a, #46c9e5, #b18cff);
}

/* İlerleme çubuğu çok renkli. */
.ap-ilerleme-dolu {
	background: linear-gradient(90deg, #ff5a5b, #ff9f45, #f2c14e, #46c9e5);
}

/* Profil özeti: her kutu kendi renginde. */
.ap-ozet-dg {
	color: var(--odak-renk, var(--kirmizi-parlak));
}

/* Haftalık plan satırı: simge sütunu + odak rengi. */
.ap-gun-satir {
	grid-template-columns: 2.2rem 104px 1fr;
	grid-template-areas:
		"ikon ad odak"
		"ikon ad ozet";
	gap: 0.1rem 0.85rem;
	border-left: 4px solid var(--odak-renk, var(--kirmizi));
	transition: transform 0.25s var(--yay);
}

.ap-gun-satir:not(.dinlenme):hover {
	transform: translateX(3px);
}

.ap-gun-ikon {
	grid-area: ikon;
	align-self: center;
	font-size: 1.35rem;
	line-height: 1;
}

.ap-gun-odak {
	color: var(--odak-renk, var(--kirmizi-parlak));
}

.ap-gun-satir.dinlenme .ap-gun-odak {
	color: var(--gri);
}

/* Seans kartı: üstte odak rengi şerit, simgeli başlık, renkli dakikalar. */
.ap-seans {
	border-top: 3px solid var(--odak-renk, var(--kirmizi));
}

.ap-seans-bas h4 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ap-seans-ikon {
	font-size: 1.15rem;
	line-height: 1;
}

.ap-seans-sure {
	color: var(--odak-renk, var(--kirmizi-parlak));
	background: rgba(255, 255, 255, 0.09);
}

.ap-blok-dk {
	color: var(--odak-renk, var(--altin));
}

/* Notlar: madde işaretleri renk döngüsünde. */
.ap-notlar li:nth-child(5n+1)::before { background: #ff5a5b; }
.ap-notlar li:nth-child(5n+2)::before { background: #ff9f45; }
.ap-notlar li:nth-child(5n+3)::before { background: #f2c14e; }
.ap-notlar li:nth-child(5n+4)::before { background: #46c9e5; }
.ap-notlar li:nth-child(5n+5)::before { background: #7ddc8a; }

@media (max-width: 640px) {
	/* Dar ekranda gün adı ayrı sütunda kalınca odak metni sıkışıp bölünüyordu;
	   simge solda, gün/odak/özet alt alta. */
	.ap-gun-satir {
		grid-template-columns: 2rem 1fr;
		grid-template-areas:
			"ikon ad"
			"ikon odak"
			"ikon ozet";
		gap: 0.12rem 0.7rem;
	}

	.ap-gun-ikon {
		align-self: start;
		padding-top: 0.15rem;
	}
}

/* Sayfa başlığındaki eylem düğmesi (ör. İletişim sayfası). */
.sayfa-basligi-eylem {
	margin-top: clamp(1.4rem, 3vw, 2rem);
}

@media (max-width: 520px) {
	.sayfa-basligi-eylem .dugme {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		text-align: center;
	}
}

/* ==========================================================================
   "Nasıl başlarım?" bölümü — isteğe bağlı arka plan fotoğrafı
   Fotoğraf Site Ayarları'ndan seçilir; seçilmezse bölüm eski düz zeminiyle kalır.
   ========================================================================== */
.adimlar-fotolu {
	position: relative;
	isolation: isolate;
	background: var(--siyah);
}

.adimlar-fotolu::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--adim-bg, none);
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	filter: contrast(1.04);
}

/* Perde: solda yazılar olduğu için o taraf koyu, sağa doğru fotoğraf görünür. */
.adimlar-fotolu::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(85% 120% at 12% 0%, rgba(253, 60, 61, 0.2), transparent 58%),
		linear-gradient(100deg, rgba(20, 20, 27, 0.95) 0%, rgba(20, 20, 27, 0.88) 45%, rgba(20, 20, 27, 0.72) 100%);
}

/* Mobilde bölüm uzadığı için fotoğraf aşırı yakınlaşmasın: üstte şerit, aşağı
   doğru zemine karışıyor. (İletişim bölümünde de aynı yaklaşım kullanıldı.) */
@media (max-width: 860px) {
	.adimlar-fotolu::before,
	.adimlar-fotolu::after {
		inset: 0 0 auto 0;
		height: min(58vh, 430px);
	}

	.adimlar-fotolu::before {
		-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	}
}

/* ==========================================================================
   Dokunma hedefleri (mobil)
   Parmakla basılan her bağlantı en az 44px yüksek olmalı (Apple/Google ölçütü).
   Ölçümde alt bilgideki telefon ve Instagram bağlantıları 17px, iletişimdeki
   büyük telefon 33px, logo bağlantısı 31px çıkmıştı — hepsi basması zor.
   Yalnızca dokunmatik cihazlarda uygulanır; masaüstü yerleşimi değişmez.
   ========================================================================== */
@media (hover: none) {
	.alti-liste a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Degrade metin (background-clip) bozulmasın diye display değiştirmek
	   yerine dikey iç boşluk veriliyor. */
	.iletisim-tel {
		padding-block: 0.4rem;
	}

	.site-logo a,
	.custom-logo-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Galeri karoları da dokunmayla açılabilir olsun. */
	.galeri-karo a,
	.galeri-karo {
		min-height: 44px;
	}
}

/* ==========================================================================
   Afiş: başlık altı satır ve kırmızı slogan
   Müşteri, eski tasarımdaki sol blok düzenini geri istedi:
   büyük ad -> küçük "BOKS OKULU" -> kırmızı slogan -> paragraf.
   Her ikisi de Site Ayarları'ndan girilir; boş bırakılırsa görünmez.
   ========================================================================== */
.afis-altbaslik {
	font-family: var(--afis);
	/* Başlığın 0.36 katı: ilk tasarımdaki oran. */
	font-size: clamp(1.6rem, 4.86vw, 3.78rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--beyaz);
	/* Başlıkla arasındaki boşluğu kapat: ikisi tek blok gibi dursun. */
	margin: 0 0 1.4rem;
}

.afis-slogan {
	font-family: var(--afis);
	font-size: clamp(1.1rem, 3vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kirmizi);
	margin: 0 0 1rem;
	max-width: none;
}

@media (max-width: 520px) {
	.afis-altbaslik {
		margin: 0 0 0.9rem;
	}
}

/* ==========================================================================
   Sosyal ağ amblemleri
   Amblem currentColor kullanıyor; bağlantı hangi renkteyse o renge boyanır.
   ========================================================================== */
.sosyal-baglanti {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.sosyal-ikon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	/* Metnin görsel ortasına otursun. */
	transform: translateY(-0.03em);
}

/*
 * Alt bilgideki amblem, üzerine gelince markanın kırmızısına döner ve
 * bağlantının kaydırma hareketine katılır (padding zaten bağlantıda).
 */
.alti-sosyal .sosyal-baglanti {
	transition: color 0.25s ease;
}

.alti-sosyal .sosyal-ikon {
	transition: transform 0.3s var(--yay);
}

.alti-sosyal a:hover .sosyal-ikon {
	transform: translateY(-0.03em) scale(1.12);
}

/* Dokunmatikte 44px'lik dokunma hedefi korunuyor. */
@media (hover: none) {
	.alti-sosyal .sosyal-baglanti {
		min-height: 44px;
	}
}