/* Kaynak: Formasyon Ana Sayfa.dc.html
   Markup'taki inline style'lar KALIR; bu dosya yalnız inline yazılamayanları taşır:
   pseudo-class, keyframe, media, durum (data-open) ve container-query kuralları. */
body { margin:0; background:#fff; -webkit-font-smoothing:antialiased; }
.fes-app a { color:#174A91; text-decoration:none; }
.fes-app a:hover { color:#092D5B; }
.fes-app [data-dd] > [data-dd-panel] { opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none; transition:opacity .18s cubic-bezier(.2,.75,.25,1), transform .18s cubic-bezier(.2,.75,.25,1), visibility .18s; }
.fes-app [data-dd] > [data-dd-panel]::before { content:''; position:absolute; left:0; right:0; top:-22px; height:22px; }
.fes-app [data-dd]::after { content:''; position:absolute; left:0; right:0; top:100%; height:26px; }
.fes-app [data-dd]:hover > [data-dd-panel],
.fes-app [data-dd]:focus-within > [data-dd-panel] { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
@keyframes fmDriftA { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(9vw,-52px,0) scale(1.16); } 100% { transform:translate3d(0,0,0) scale(1); } }
@keyframes fmDriftB { 0% { transform:translate3d(0,0,0) scale(1.08); } 50% { transform:translate3d(-7vw,64px,0) scale(.94); } 100% { transform:translate3d(0,0,0) scale(1.08); } }
@keyframes fmDriftC { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(5vw,44px,0) scale(1.22); } 100% { transform:translate3d(0,0,0) scale(1); } }
@media (prefers-reduced-motion: reduce) { [data-orb] { animation:none !important; } }
@keyframes fmFill { 0% { transform:scaleX(0); opacity:1; } 88% { transform:scaleX(1); opacity:1; } 96% { transform:scaleX(1); opacity:0; } 100% { transform:scaleX(0); opacity:0; } }
@keyframes fmRun { 0% { left:0%; opacity:0; } 6% { opacity:1; } 88% { left:100%; opacity:1; } 96%,100% { left:100%; opacity:0; } }
@keyframes fmNode { 0%, 100% { transform:scale(1); background:#DCE5EF; box-shadow:0 0 0 0 rgba(216,61,53,0); } 4% { transform:scale(1.55); background:#D83D35; box-shadow:0 0 0 9px rgba(216,61,53,.16); } 20% { transform:scale(1.2); background:#D83D35; box-shadow:0 0 0 4px rgba(216,61,53,.10); } 30% { transform:scale(1); background:#9FB8D6; box-shadow:0 0 0 0 rgba(216,61,53,0); } }
@keyframes fmNum { 0%, 100% { color:#DCEAF8; transform:translateY(0); } 5% { color:#D83D35; transform:translateY(-5px); } 24% { color:#B7D0EA; transform:translateY(0); } }
  [data-qrail] a { box-sizing:border-box; height:52px; padding:0 20px 0 17px; justify-content:center; }
  [data-qrail] [data-qlabel] { margin-left:10px; white-space:nowrap; }
@keyframes fmShine { 0% { transform:translateX(-140%) skewX(-18deg); } 55%,100% { transform:translateX(320%) skewX(-18deg); } }
@keyframes fmPulse { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

/* --- HERO ölçekleyici -------------------------------------------------------
   Hero geometrisi HERO-LOCK'a bağlı: 1440x584'lük kompozisyon px olarak KORUNUR,
   yalnızca tek parça olarak ölçeklenir (tasarımın kendi `zoom = innerWidth/1440`
   davranışının JS'siz karşılığı). Ölçek katsayısı tan(atan2()) ile uzunluk
   bölmesinden gelir; desteklemeyen tarayıcıda kural hiç uygulanmaz ve hero
   1440px genişlikte, wrapper'ın overflow:hidden'ı ile kırpılarak durur. */
.fes-app [data-fes-hero-scale] { container-type:inline-size; }
@supports (height: calc(1px * tan(atan2(1px, 1px)))) {
	.fes-app [data-fes-hero-scale] { aspect-ratio:1440 / 584; height:auto; }
	.fes-app [data-fes-hero-scale] > section {
		transform-origin:0 0;
		transform:scale(tan(atan2(100cqw, 1440px)));
	}
}
.fes-app [data-fes-hero-scale] input[type="search"] { -webkit-appearance:none; appearance:none; }
.fes-app [data-fes-hero-scale] input[type="search"]:focus { box-shadow:none; }
.fes-app [data-fes-hero-scale] > section > form > div:focus-within { border-color:#174A91; box-shadow:0 0 0 3px rgba(23,74,145,.14); }

/* --- SSS akordeonu -------------------------------------------------------
   Erişilebilirlik önceliği: native <details>/<summary> — /sss/ sayfasıyla
   AYNI kontrat (bkz. partials/pages/faq.php + assets/css/pages/faq.css).
   JS kapalıyken de tarayıcı yerleşik toggle'ıyla tüm cevaplar açılıp
   okunabilir. Açık/kapalı durum native `open` özniteliğiyle sürülür; sol
   kırmızı iç gölge + #F7FAFD zemin + rozet renk değişimi /sss/ ile birebir
   aynı. Ana sayfaya özgü fark (kaynak: Formasyon Ana Sayfa.dc.html):
   numaralı rozet (01–06) + döner ok ikonu — /sss/ sayfasının dairesel
   "+/−" rozetinden farklı, tasarımdan olduğu gibi korundu.
   `[data-fes-faq-body]` içeriğine KOŞULSUZ `display` verilmez: UA'nın
   `details:not([open]) > *:not(summary){display:none}` kuralını ezip
   kapalı öğeleri de görünür kılar — bu yüzden grid-template-rows açılış
   animasyonu (eski JS'li sürümde vardı) burada da uygulanmıyor. */
.fes-app [data-fes-faq-item] {
	background:transparent;
	box-shadow:inset 2px 0 0 transparent;
	transition:background .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s cubic-bezier(.22,.61,.36,1);
}
.fes-app [data-fes-faq-item][open] { background:#F7FAFD; box-shadow:inset 2px 0 0 #D83D35; }

.fes-app [data-fes-faq-trigger] { white-space:normal; list-style:none; }
.fes-app [data-fes-faq-trigger]::-webkit-details-marker,
.fes-app [data-fes-faq-trigger]::marker { display:none; content:''; }
.fes-app [data-fes-faq-trigger]:focus-visible { outline:2px solid #174A91; outline-offset:-3px; }

.fes-app [data-fes-faq-num] {
	font-family:'Instrument Sans', Manrope, Arial, sans-serif;
	font-size:14px; font-weight:700; letter-spacing:.08em; padding-top:5px;
	color:#9FB8D6; transition:color .26s cubic-bezier(.22,.61,.36,1);
}
.fes-app [data-fes-faq-item][open] [data-fes-faq-num] { color:#D83D35; }

.fes-app [data-fes-faq-q] {
	font-family:'Instrument Sans', Manrope, Arial, sans-serif;
	font-size:18.5px; line-height:1.34; letter-spacing:-.3px; font-weight:600;
	text-wrap:pretty; color:#10233C; transition:color .26s cubic-bezier(.22,.61,.36,1);
}
.fes-app [data-fes-faq-item][open] [data-fes-faq-q] { color:#092D5B; }

.fes-app [data-fes-faq-icon] {
	flex:0 0 auto; margin-top:2px; width:30px; height:30px; border-radius:50%;
	display:grid; place-items:center; background:#F3F8FD; color:#174A91;
	transform:rotate(0deg);
	transition:background .26s cubic-bezier(.22,.61,.36,1), color .26s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1);
}
.fes-app [data-fes-faq-item][open] [data-fes-faq-icon] { background:#D83D35; color:#fff; transform:rotate(180deg); }

/* --- Claude Design style-hover/focus/active dönüşümleri ---
   Tasarımdan gelen inline style'lar (background/color/border/box-shadow) stylesheet
   kurallarını yener; hover'ın etkili olması için bu bildirimler !important olmalı. */
.fes-app [data-fh="f8d74bd1"]:hover { background:#C4342D !important; transform:translateY(-1px); }
.fes-app [data-fh="683f44e5"]:hover { background:#0B3A73 !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 14px 28px -14px rgba(9,45,91,.9) !important; }
.fes-app [data-fh="d575526c"]:hover { color:#092D5B !important; }
.fes-app [data-fh="64e45c1d"]:hover { border-color:#174A91 !important; background:#F3F8FD !important; }
.fes-app [data-fh="f231e956"]:hover { box-shadow:0 38px 70px -24px rgba(9,45,91,.42), 0 12px 28px -14px rgba(9,45,91,.24) !important; transform:translateY(-8px); border-color:#C9DAEC !important; }
.fes-app [data-fh="244f6f6c"]:hover { color:#174A91 !important; }
.fes-app [data-fh="a7afc95a"]:hover { background:#C4342D !important; color:#fff !important; }
.fes-app [data-fh="03c23b24"]:hover { background:#F3F8FD !important; color:#174A91 !important; }
.fes-app [data-fh="2768aa5b"]:hover { background:#C4342D !important; color:#fff !important; transform:translateY(-2px); }
.fes-app [data-fh="80b9e031"]:hover { border-color:#174A91 !important; }
.fes-app [data-fh="6da4d783"]:hover { border-color:#fff !important; background:rgba(255,255,255,.08) !important; color:#fff !important; }

/* Solid CTA'ların focus hâli de marka rengini korusun (tema reset'i şeffaflaştırır). */
.fes-app [data-fh="f8d74bd1"]:focus-visible,
.fes-app [data-fh="a7afc95a"]:focus-visible,
.fes-app [data-fh="2768aa5b"]:focus-visible { background:#C4342D !important; color:#fff !important; }
.fes-app [data-fh="683f44e5"]:focus-visible { background:#0B3A73 !important; color:#fff !important; }

/* ---------------------------------------------------------------------------
   Bölüm başlığı satırı — dar ekranda sarma.
   `!important` zorunlu: kurallar tasarımdan gelen INLINE style'ları eziyor,
   inline her zaman stylesheet'i yener. Ölçüldü: `text-wrap:nowrap` taşıyan H2
   satırı 995px'e kilitliyor ve 834/768'de belgede yatay kaydırma üretiyordu.
   --------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
	.fes-app .fes-sechead {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 24px !important;
	}

	.fes-app .fes-sechead > div { max-width: none !important; min-width: 0 !important; }

	.fes-app .fes-sechead__title {
		text-wrap: balance !important;
		font-size: clamp(26px, 3.6vw, 40px) !important;
		letter-spacing: -.5px !important;
	}
}

/* ---------------------------------------------------------------------------
   HERO — dar ekran (<1024px) akışkan düzeni.
   GEREKÇE (ölçüldü): yukarıdaki HERO-LOCK ölçekleyicisi 1440px'lik kompozisyonu
   tek parça küçültüyor; 390px'te ölçek ~%27'ye iniyor ve başlık/alt metin/arama
   kutusu okunamaz hale geliyor (bkz. _qa/hero-before/w390.jpg). Bu blok
   1024px ALTINDA ölçeklemeyi kapatır ve tasarımda karşılığı OLMAYAN yeni bir
   akışkan düzen kurar — bilinçli sapma. >=1024px'te hiçbir şey değişmez.
   Düzen (HERO-LOCK "Responsive davranış" maddesiyle uyumlu):
     başlık + alt metin → tek kolon arama paneli → iki fotoğraflı denge kolajı.
   Gizlenenler: dekoratif çizgi SVG'si, iki dar sütun şeridi ve DIŞ iki fotoğraf
   (hero-01/hero-04) — dar ekranda 52px'lik şerit ve dört panel kullanılamaz
   hale geliyor. Radyal zemin (section inline background) ve orta kemer motifi
   KORUNUR, kemer sadeleştirilerek başlığın arkasına alınır.
   `!important` zorunlu: hero'nun tüm geometrisi tasarımdan gelen INLINE
   style'larda (position/left/top/width/height/transform) ve inline her zaman
   stylesheet'i yener. Ölçek kuralı inline değil ama @supports blokunda aynı
   özgüllükte; sıraya bağımlı kalmamak için o da !important ile nötrlenir.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {

	/* Ölçek kilidini kaldır: sabit en-boy oranı yerine içerikten gelen yükseklik.
	   `container-type` KORUNUR (yukarıdaki @supports bloğu bozulmasın). */
	.fes-app [data-fes-hero-scale] { aspect-ratio: auto !important; height: auto !important; }

	.fes-app [data-fes-hero-scale] > section {
		transform: none !important;          /* tan(atan2()) ölçeği tamamen devre dışı */
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box !important;
		padding: clamp(26px, 7vw, 44px) 20px clamp(22px, 6vw, 40px) !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 300px));
		justify-content: center;
		align-content: start;
		column-gap: 16px;
	}

	/* Dar ekranda kullanılamayan dekorlar + dış fotoğraf panelleri. */
	.fes-app [data-fes-hero-lines],
	.fes-app [data-fes-hero-pillar],
	.fes-app [data-fes-hero-fig="1"],
	.fes-app [data-fes-hero-fig="4"] { display: none !important; }

	/* Kemer motifi: mutlak konumlu kalır (grid item değil), başlığın arkasına. */
	.fes-app [data-fes-hero-arch] {
		top: clamp(10px, 3vw, 24px) !important;
		width: min(96vw, 470px) !important;
		/*
		 * Kemerin ALT KENARI YOK (`border-bottom:0`); şekil aşağıda açık biter.
		 * 66vw'de taban 383px'e denk geliyordu, arama kartı ise 385px'te
		 * başlıyor: kesik tam kartın ÜSTÜNDE kalıyor ve "yarım kalmış çizim"
		 * gibi görünüyordu (ölçüldü). Kemeri uzatınca açık taban opak kartın
		 * ARKASINA giriyor ve kesik görünmüyor. Masaüstünde bu blok çalışmaz.
		 */
		height: clamp(330px, 104vw, 430px) !important;
		border-radius: min(48vw, 235px) min(48vw, 235px) 0 0 !important;
		z-index: 0 !important;
	}

	/* Başlık + alt metin bloğu: mutlak konumdan grid akışına. */
	.fes-app [data-fes-hero-copy] {
		position: static !important;
		transform: none !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		grid-column: 1 / -1;
		order: 1;
	}

	/*
	 * Başlık KUBBENİN İÇİNDE kalmalı. Kemer bir yarım daire: üstte yatay
	 * genişliği hızla daralıyor. Ölçüldü — eski değerlerde ilk satır
	 * ("Online Eğitimle", 271px) kubbenin o yükseklikteki genişliğinden
	 * (86px) 92px taşıyordu. İki koldan çözülüyor: satırlar kısaltılıyor
	 * (font küçültme) ve blok aşağı itiliyor (kubbenin geniş kısmına).
	 */
	.fes-app [data-fes-hero-copy] {
		padding-top: clamp(46px, 13.5vw, 74px) !important;
	}

	.fes-app [data-fes-hero-copy] h1 {
		font-size: clamp(24px, 7.4vw, 39px) !important;
		line-height: 1 !important;
		letter-spacing: -.028em !important;
		max-width: min(74vw, 320px) !important;
		margin-inline: auto !important;
	}

	.fes-app [data-fes-hero-copy] p {
		max-width: min(76vw, 340px) !important;   /* alt metin kemerin içinde kalsın */
		margin: clamp(14px, 4vw, 24px) auto 0 !important;
		font-size: clamp(15px, 4.1vw, 17px) !important;
	}

	/* Arama paneli: mutlak konumdan grid akışına, tek kolon.

	   `static` DEĞİL `relative`: öneri paneli forma göre mutlak konumlanıyor
	   ve form static olduğunda bağlam üstteki section'a kayıyor — panel
	   fotoğrafların ALTINA düşüyordu (ölçüldü). Ofset verilmediği için
	   `relative` akışta static ile birebir aynı, yalnız bağlamı kuruyor. */
	.fes-app [data-fes-hero-form] {
		position: relative !important;
		transform: none !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		grid-column: 1 / -1;
		order: 2;
		margin-top: clamp(20px, 5vw, 30px);
		padding: 14px !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;
		box-shadow: 0 18px 42px rgba(9, 45, 91, .15) !important;
	}

	.fes-app [data-fes-hero-form] > div {
		height: auto !important;
		min-height: 60px;
		padding: 10px 16px 10px 10px !important;
	}

	/* iOS, 16px'in altındaki alanlarda odaklanınca sayfayı zoomlar. */
	.fes-app [data-fes-hero-form] input[type="search"] {
		font-size: 16px !important;
		/* Uzun yer tutucu dar alanda kelime ortasında kesiliyordu; üç nokta
		   ile bitmesi kasıtlı görünsün. */
		text-overflow: ellipsis;
	}

	/* Dokunma hedefi >= 44px (HERO-LOCK: mobilde CTA en az 52px). */
	.fes-app [data-fes-hero-form] > button {
		min-height: 54px;
		font-size: 16px !important;
	}

	/*
	 * Denge kolajı: iki iç panel yan yana.
	 *
	 * EĞİK MASKELER KALDIRILDI (bilinçli sapma). Tasarımda dört panel var ve
	 * `clip-path: polygon(0 12%, 100% 0, …)` ile karşılıklı açılar birbirine
	 * ZİNCİRLENİYOR — yelpaze etkisi ancak dördü yan yanayken okunuyor.
	 * Mobilde dış iki panel gizlendiği için (hero-01/hero-04) kalan ikisinin
	 * açıları ortada bir "^" tepe ve her fotoğrafın üstünde üçgen boşluk
	 * üretiyordu; kırık render gibi görünüyordu (kullanıcı iki kez bildirdi,
	 * 3x kırpılmış ekran görüntüsüyle doğrulandı).
	 * Maske yerine tasarımın kendi kart diline uygun köşe yarıçapı verildi.
	 */
	.fes-app [data-fes-hero-fig="2"],
	.fes-app [data-fes-hero-fig="3"] {
		position: relative !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 5;
		order: 3;
		margin-top: clamp(18px, 5vw, 28px);
		clip-path: none !important;
		border-radius: 12px;
	}

	.fes-app :is( [data-fes-hero-fig="2"], [data-fes-hero-fig="3"] ) img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.fes-app [data-fes-hero-fig="2"] { grid-column: 1; }
	.fes-app [data-fes-hero-fig="3"] { grid-column: 2; }
}

/* Tablet: arama alanı + CTA yan yana sığar (dokunma hedefi korunur). */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.fes-app [data-fes-hero-form] {
		grid-template-columns: minmax(0, 1fr) 200px !important;
		padding: 16px !important;
	}

	/* Genişledikçe portre panel yüksekliği kolajı domine etmesin. */
	.fes-app [data-fes-hero-fig="2"],
	.fes-app [data-fes-hero-fig="3"] { aspect-ratio: 5 / 4; }
}

/* ---------------------------------------------------------------------------
   Çok sütunlu bölümler dar ekranda yığılır.
   ÖLÇÜLDÜ (390px, headless Chrome): öne çıkan kartların ızgarası
   `repeat(4, 1fr)` olarak kalıyordu → kart 57px, "Sepete Ekle" butonu 19×46px,
   yani fiilen dokunulamaz. Yatay taşma OLUŞMADIĞI için taşma testinden
   geçiyordu; bu yüzden ayrı bir dokunma-hedefi ölçümü gerekti.
   `!important` zorunlu: ızgara tanımı tasarımdan gelen inline style'da.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.fes-app .fes-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	/*
	 * `gap` EZİLMEZ. Bu kap "ince çizgi" hilesi kullanıyor: kabın zemini
	 * #E7EEF7, hücreler beyaz ve satır içi `gap:2px` aradaki 2px'i ayırıcı
	 * çizgi olarak gösteriyor. Daha önce buraya `gap:32px` yazmıştım ve
	 * mobilde her kutu arasında 32px'lik MAVİ BANT çıkıyordu (ölçüldü:
	 * masaüstünde gap 2px, mobilde 32px; kabın boş alanı %2'den %18'e
	 * çıkmıştı). Yalnız kolon sayısı tek kolona indiriliyor.
	 */
	.fes-app .fes-g2 { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 639.98px) {
	.fes-app .fes-g4 { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
}

/* ---------------------------------------------------------------------------
   NOT: burada koyu bölümlerdeki metinleri tek renge zorlayan bir kural vardı.
   Tasarımla birebir karşılaştırmada bu kuralın tasarımın KENDİ aksan
   renklerini ezdiği ölçüldü — "01–04" adım numaraları ve bölüm etiketi
   #FF6258, soluk etiketler #8FA9C8 olmalıyken hepsi #C3D4E8'e düşüyordu.
   Kural kaldırıldı; tasarımın renkleri geçerli.
   --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Hero canlı arama paneli.

   `[data-dd]` KULLANILMADI çünkü o kural `:hover` ile de açıyor — arama
   kutusunun üstünden fare geçince panelin açılması yanlış olurdu. Panel
   yalnız odakla açılıyor; JS Escape'te `data-fes-search-closed` bırakıyor.

   Hero bölümü clip-path maskeleri yüzünden `overflow` kırpabiliyor; panel
   `z-index:20` ile formun içinde ve form `position:absolute` olduğu için
   konumlandırma bağlamı form. Kırpma ölçülerek doğrulandı.
   -------------------------------------------------------------------------- */
.fes-app [data-fes-hero-form] > [data-fes-hero-panel] {
	opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
	transition: opacity .18s cubic-bezier(.2,.75,.25,1), transform .18s cubic-bezier(.2,.75,.25,1), visibility .18s;
}
.fes-app [data-fes-hero-form]:focus-within > [data-fes-hero-panel] {
	opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.fes-app [data-fes-hero-form][data-fes-search-closed] > [data-fes-hero-panel] {
	opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
}
/* Panel, hero'nun ölçek sarmalayıcısı tarafından kırpılıyordu.

   ÖLÇÜLDÜ: `#hero-scale` `overflow:hidden`; alt kenarı 694px'te bitiyor,
   panelin alt kenarı 839px'e uzanıyordu — panelin yalnız 29px'i görünürdü.

   `overflow:hidden` buradan kaldırılamaz: masaüstünde sabit 1440x584 bölüm
   `transform:scale()` ile küçültülüyor ve `@supports` desteklenmeyen
   tarayıcıda kırpma tek emniyet supabı. Bu yüzden taşmaya YALNIZ hero'da
   odak varken izin veriliyor — yani tam olarak panelin açık olduğu anda.

   `:has()` yerine `:focus-within`: aynı sonucu veriyor ve eski tarayıcılarda
   da çalışıyor. */
.fes-app [data-fes-hero-scale]:focus-within { overflow: visible !important; }   /* satır içi style="overflow:hidden" var; !important şart */

.fes-app [data-fes-hero-panel] [role="option"]:hover,
.fes-app [data-fes-hero-panel] [role="option"][data-active] { background: #F3F8FD; }

/* Dar ekranda öneri kartı: eski fiyat düşer, başlığa yer açılır.
   ÖLÇÜLDÜ: 390px'te "3.900,00 ₺ 3.200,00 ₺" ikilisi ~150px yiyor ve
   eğitim adı "Aile Danışman…" diye kırpılıyordu. İndirim bilgisi kartın
   kendisinde zaten var; öneri listesinde güncel fiyat yeterli. */
@media (max-width: 479.98px) {
	.fes-app [data-fes-hero-panel] [role="option"] del { display: none; }
	.fes-app [data-fes-hero-panel] [role="option"] { gap: 10px; }
}