/* Kaynak: Eğitimler.dc.html */
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 input:focus,
.fes-app select:focus { outline:0; border-color:#174A91; box-shadow:0 0 0 3px rgba(23,74,145,.12); }
.fes-app [data-card] img { transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.fes-app [data-card]:hover img { transform:scale(1.06); }
.fes-app [data-card] [data-title] { transition:color .24s cubic-bezier(.22,.61,.36,1); }
.fes-app [data-card]:hover [data-title] { color:#174A91; }
.fes-app [data-filters]::-webkit-scrollbar { width:6px; }
.fes-app [data-filters]::-webkit-scrollbar-track { background:transparent; }
.fes-app [data-filters]::-webkit-scrollbar-thumb { background:#DCE5EF; border-radius:3px; }
/* --- Claude Design style-hover/focus/active dönüşümleri --- */
.fes-app [data-fh="74f439ef"]:hover { color:#C4342D; }
.fes-app [data-fh="d53b53cc"]:hover { background:#123C73; }
.fes-app [data-fh="2768aa5b"]:hover { background:#C4342D; color:#fff; transform:translateY(-2px); }
.fes-app [data-fh="ee8390ce"]:hover { color:#D83D35; }
.fes-app [data-fh="f702b17a"]:hover { box-shadow:0 38px 70px -26px rgba(9,45,91,.42), 0 12px 28px -14px rgba(9,45,91,.22); transform:translateY(-8px); border-color:#C9DAEC; }
.fes-app [data-fh="a7afc95a"]:hover { background:#C4342D; }
.fes-app [data-fh="c63e014c"]:hover { border-color:#174A91; background:#F3F8FD; color:#092D5B; }
.fes-app [data-fh="191c53d8"]:hover { background:#071F42; color:#fff; }
.fes-app [data-fh="03c23b24"]:hover { background:#F3F8FD; color:#092D5B; }
/* --- Dinamik katman: buton görevi gören bağlantılar + klavye odağı --- */
.fes-app[data-fes-page="courses"] [data-card] a[data-fh="a7afc95a"],
.fes-app[data-fes-page="courses"] [data-card] a[data-fh="03c23b24"] { text-decoration:none; }
.fes-app[data-fes-page="courses"] [data-card] a[data-fh="a7afc95a"]:hover { color:#fff; }
.fes-app[data-fes-page="courses"] a:focus-visible,
.fes-app[data-fes-page="courses"] button:focus-visible { outline:2px solid #174A91; outline-offset:2px; border-radius:8px; }
/* Fiyat aralığı alanları: type=number tarayıcı okunu gizle (tasarım düz kutu). */
.fes-app[data-fes-page="courses"] input[type="number"]::-webkit-outer-spin-button,
.fes-app[data-fes-page="courses"] input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.fes-app[data-fes-page="courses"] input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
/* --- Duyarlı yerleşim (tasarımın satır içi grid'lerini kırar) --- */
@media (max-width:1023px) {
.fes-app[data-fes-page="courses"] .fes-courses-grid { grid-template-columns:1fr !important; }
/*
* Yan panel dar ekranda ÇÖZÜLÜR (`display:contents`), böylece iki çocuğu
* (filtre kartı + "Karar Veremedin mi?" tanıtım kartı) doğrudan ızgaranın
* öğesi olur ve ayrı ayrı sıralanabilir.
*
* NEDEN: filtre katlandıktan sonra bile yan panel 613px yer kaplıyordu —
* çünkü tanıtım kartı da içindeydi ve sonuçların ÜSTÜNDE kalıyordu
* (ölçüldü, 390px). Sıra artık: filtre başlığı → SONUÇLAR → tanıtım kartı.
* `display:contents` panelin kendi `gap:20px` boşluğunu iptal ettiği için
* boşluk çocuklara margin olarak geri verilir.
*/
.fes-app[data-fes-page="courses"] .fes-courses-aside {
position: static !important;
display: contents !important; /* satır içi display:flex'i yenmek için */
}
.fes-app[data-fes-page="courses"] .fes-courses-aside > * { order: 3; margin-top: 20px; }
.fes-app[data-fes-page="courses"] .fes-courses-aside > :first-child { order: 1; margin-top: 0; }
.fes-app[data-fes-page="courses"] .fes-courses-grid > div { order: 2; }
.fes-app[data-fes-page="courses"] .fes-courses-cards { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:767px) {
.fes-app[data-fes-page="courses"] .fes-courses-shell,
.fes-app[data-fes-page="courses"] .fes-courses-grid { padding-left:20px !important; padding-right:20px !important; }
}
@media (max-width:599px) {
.fes-app[data-fes-page="courses"] .fes-courses-cards { grid-template-columns:1fr !important; }
}
/* --- AJAX katmanı (fes-catalog.js) — tasarımda yeni öğe YOK ------------------
Yükleniyor durumu yalnız mevcut sonuç bloğunu soluklaştırır; spinner ya da
başka bir görsel öğe eklenmez. Kap programatik odaklandığı için (tabindex=-1)
tarayıcının varsayılan çerçevesi bastırılır — görünüm birebir kalır. */
.fes-app[data-fes-page="courses"] [data-fes-results] { transition:opacity .18s cubic-bezier(.2,.75,.25,1); }
.fes-app[data-fes-page="courses"] [data-fes-results][data-loading] { opacity:.55; pointer-events:none; }
.fes-app[data-fes-page="courses"] [data-fes-results]:focus { outline:0; }
@media (prefers-reduced-motion:reduce) {
.fes-app[data-fes-page="courses"] [data-fes-results] { transition:none; }
}
/* ---------------------------------------------------------------------------
FİLTRE PANELİ — dar ekranda katlanır (bilinçli sapma, faz-2 responsive).
ÖLÇÜLDÜ (staging, 390px): panel tamamen açık olduğu için "Filtreler"
başlığı 544px'te, kategori kutuları 623–847px'te ve İLK ÜRÜN KARTI
2.074px'te kalıyordu. Ziyaretçi ürünü görmeden önce ~2.000px kaydırıyordu.
Kapatma `.fes-filtre--kapali` SINIFIYLA yapılır, `hidden` özniteliğiyle
değil: aşağıdaki kural yalnız <1024px'te geçerli olduğu için kullanıcı
pencereyi büyüttüğünde panel kendiliğinden geri gelir.
Masaüstünde açma butonu gizlenir, panel her zaman açıktır.
--------------------------------------------------------------------------- */
.fes-app .fes-filtre-ac {
display: none;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font: inherit;
color: inherit;
}
.fes-app .fes-filtre-ac svg { transition: transform .18s cubic-bezier(.2,.75,.25,1); }
.fes-app .fes-filtre-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 1023.98px) {
.fes-app .fes-filtre-ac { display: inline-flex; min-height: 44px; }
/*
* Yalnız `[data-filters]` değil, BAŞLIK DIŞINDAKİ HER ŞEY katlanır.
* Ölçüldü: filtre kartının dört çocuğu var — başlık, "Eğitim Alanı"
* (`data-filters`), "Sertifika Kaydı" ve "Fiyat Aralığı". İlk kuralım
* yalnız ilkini gizliyordu ve kart hâlâ 375px yer kaplıyordu.
*/
.fes-app .fes-filtre--kapali > *:not(:first-child) { display: none; }
/* Kapalıyken başlık satırının alt çizgisi anlamsız kalıyor. */
.fes-app .fes-filtre--kapali > div:first-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fes-app .fes-filtre-ac svg { transition: none; }
}
/* -----------------------------------------------------------------------------
Sayfalama — mobil (revizyon 2026-09).
Müşteri: "Ürünler sayfasındaki ürün sayfalarına giden ok küçük kalmış."
ÖLÇÜLDÜ (canlı, 33 sayfa, 390px): ok + 1…5 + … + 33 + ok = 9 öğe ≈ 460px,
kap 350px. Numaralarda `min-width:44px` var, oklarda yalnız `width` — satır
sığmayınca YALNIZ oklar büzülüp ~18px'e düşüyordu.
Çözüm: oklar büzülmez; mevcut sayfaya ±1'den uzak pencere numaraları
(`data-fes-far`, PHP işaretliyor) mobilde gizlenir — ilk/son sayfa kalır.
En kalabalık durum (ok,1,…,9,10,11,…,33,ok) 330px.
-------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
.fes-app [data-fes-pager] { gap: 4px !important; flex-wrap: wrap; }
.fes-app [data-fes-pager] > * { flex: 0 0 auto; }
.fes-app [data-fes-pager] > [data-fes-far] { display: none !important; }
.fes-app [data-fes-pager] > a:not([rel]),
.fes-app [data-fes-pager] > a[aria-current] { min-width: 38px !important; padding: 0 8px !important; }
.fes-app [data-fes-pager] > [rel],
.fes-app [data-fes-pager] > span[aria-hidden]:has(svg) { width: 40px !important; }
.fes-app [data-fes-pager] > span[aria-hidden]:not(:has(svg)) { min-width: 14px !important; }
}