/* Yaklaşan sınavlar: Online Kurslar şeridi (ss-serit) ve kategori sayfası sayacı (ss-tek). partials/sinav-sayaci.htm
   Blog kenar sütunundaki görünüm (ks-sayac) blog-detay.htm içindedir. */
.ss-serit, .ss-tek { --ss-lac: #1C2539; --ss-tur: #FD762D; --ss-turk: #C2560F; --ss-gri: #5D666F; --ss-cizgi: #ECEFF4; }
.ss-serit *, .ss-tek * { box-sizing: border-box; }

/* Nabız noktası */
.ss-nabiz { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ss-tur); }
.ss-nabiz::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ss-tur); opacity: 0; animation: ssNabiz 2s ease-out infinite; }
@keyframes ssNabiz { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }

/* ---------- Şerit (Online Kurslar) ---------- */
.ss-serit { margin: 0 0 40px; padding: 22px 22px 20px; border-radius: 24px; background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 70%); border: 1px solid #FBE3D4; box-shadow: 0 16px 36px rgba(28, 37, 57, .06); }
.ss-serit__ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; }
.ss-serit .ss-serit__baslik { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ss-lac); font-family: var(--font-heading--family); font-size: 22px; font-weight: 700; line-height: 1.3; }
.ss-serit__bilgi { margin: 0; color: var(--ss-gri); font-size: 13.5px; }
.ss-serit__liste { display: grid; grid-template-columns: repeat(var(--ss-sayi, 4), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ss-serit__oge { margin: 0; list-style: none; min-width: 0; }
.ss-kart { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid var(--ss-cizgi); color: var(--ss-lac); text-decoration: none; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ss-kart:hover { color: var(--ss-lac); border-color: #F6C3A3; box-shadow: 0 14px 30px rgba(253, 118, 45, .14); transform: translateY(-2px); }
.ss-kart:focus-visible { outline: 3px solid var(--ss-tur); outline-offset: 3px; }
.ss-kart--ilk { background: radial-gradient(130% 90% at 100% 0%, #2E3B57 0%, #1C2539 60%); border-color: var(--ss-lac); color: #fff; box-shadow: 0 18px 40px rgba(28, 37, 57, .24); }
.ss-kart--ilk::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 118, 45, .32), rgba(253, 118, 45, 0) 70%); pointer-events: none; }
.ss-kart--ilk:hover { color: #fff; border-color: var(--ss-lac); box-shadow: 0 20px 44px rgba(28, 37, 57, .32); }
.ss-kart__rozet { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--ss-tur); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.ss-kart__isim { font-family: var(--font-heading--family); font-size: 16px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.ss-kart__tarih { display: flex; align-items: center; gap: 6px; color: var(--ss-gri); font-size: 13px; line-height: 1.35; }
.ss-kart__tarih svg { flex: none; color: var(--ss-tur); }
.ss-kart--ilk .ss-kart__tarih { color: rgba(255, 255, 255, .78); }
.ss-kart__not { color: #6B7480; font-size: 12.5px; line-height: 1.35; }
.ss-kart--ilk .ss-kart__not { color: rgba(255, 255, 255, .7); }
.ss-sayi { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.ss-sayi__kutu { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 8px 4px 7px; border-radius: 12px; background: #F3F5F8; color: var(--ss-lac); line-height: 1; }
.ss-sayi__kutu b { font-family: var(--font-heading--family); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-sayi__kutu small { margin-top: 4px; color: #6B7480; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.ss-sayi__kutu--gun { flex-grow: 1.4; background: #FFF1E8; color: var(--ss-tur); }
.ss-sayi__kutu--gun b { font-size: 24px; }
.ss-sayi__kutu--gun small { color: #B04B0A; }
.ss-kart--ilk .ss-sayi__kutu { background: rgba(255, 255, 255, .12); color: #fff; }
.ss-kart--ilk .ss-sayi__kutu small { color: rgba(255, 255, 255, .78); }
.ss-kart--ilk .ss-sayi__kutu--gun { background: var(--ss-tur); }
.ss-kart--ilk .ss-sayi__kutu--gun small { color: rgba(255, 255, 255, .9); }
.ss-kart__git { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--ss-turk); font-size: 13.5px; font-weight: 600; }
.ss-kart__git span { transition: transform .2s ease; }
.ss-kart:hover .ss-kart__git span { transform: translateX(3px); }
.ss-kart--ilk .ss-kart__git { color: #FFB27F; }

/* Tablet ve telefon: kartlar yana kaydırılır (yapışarak durur) */
@media (max-width: 991px) {
  .ss-serit { margin-bottom: 28px; padding: 18px 0 16px; border-radius: 20px; }
  .ss-serit__ust { padding: 0 18px; margin-bottom: 12px; }
  .ss-serit .ss-serit__baslik { font-size: 19px; }
  .ss-serit__liste { display: flex; gap: 12px; padding: 2px 18px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ss-serit__liste::-webkit-scrollbar { display: none; }
  .ss-serit__oge { flex: 0 0 min(78%, 280px); scroll-snap-align: start; }
}

/* ---------- Tek sayaç (kategori sayfası) ---------- */
.ss-tek { position: relative; margin: 0 0 18px; }
.ss-tek__bilgi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etiket sayi" "isim sayi" "tarih sayi"; align-items: center; gap: 4px 24px; padding: 18px 20px; border-radius: 18px; background: radial-gradient(130% 120% at 100% 0%, #2E3B57 0%, #1C2539 60%); color: #fff; box-shadow: 0 18px 40px rgba(28, 37, 57, .2); overflow: hidden; isolation: isolate; }
.ss-tek__bilgi::after { content: ""; position: absolute; z-index: -1; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 118, 45, .3), rgba(253, 118, 45, 0) 70%); pointer-events: none; }
.ss-tek__etiket { grid-area: etiket; display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ss-tek__isim { grid-area: isim; font-family: var(--font-heading--family); font-size: 19px; font-weight: 700; line-height: 1.35; color: #fff; }
.ss-tek__tarih { grid-area: tarih; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.4; }
.ss-tek__tarih svg { flex: none; color: var(--ss-tur); }
.ss-tek__tarih em { font-style: normal; color: rgba(255, 255, 255, .66); }
.ss-tek__tarih a { color: #FFB27F; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ss-tek__tarih a:hover { color: #fff; }
.ss-tek__sayi { grid-area: sayi; display: flex; gap: 8px; }
.ss-tek__kutu { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; padding: 10px 6px 9px; border-radius: 14px; background: rgba(255, 255, 255, .12); line-height: 1; }
.ss-tek__kutu b { font-family: var(--font-heading--family); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.ss-tek__kutu small { margin-top: 5px; color: rgba(255, 255, 255, .78); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.ss-tek__kutu--gun { min-width: 76px; background: var(--ss-tur); box-shadow: 0 10px 24px rgba(253, 118, 45, .35); }
.ss-tek__kutu--gun b { font-size: 32px; }
.ss-tek__kutu--gun small { color: rgba(255, 255, 255, .92); }
@media (max-width: 767px) {
  .ss-tek__bilgi { grid-template-columns: minmax(0, 1fr); grid-template-areas: "etiket" "isim" "tarih" "sayi"; gap: 6px; padding: 16px; }
  .ss-tek__sayi { margin-top: 8px; gap: 6px; }
  .ss-tek__kutu { flex: 1 1 0; min-width: 0; }
  .ss-tek__kutu--gun { flex-grow: 1.3; min-width: 0; }
  .ss-tek__kutu b { font-size: 22px; }
  .ss-tek__kutu--gun b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-nabiz::after { animation: none; }
  .ss-kart:hover { transform: none; }
}

/* ---------- Sol sütun (Online Kurslar): blog kenar sütunundaki görünümün aynısı (ks-sayac, blog-detay.htm) ---------- */
.ok-sayac { --ks-lac: #1C2539; --ks-tur: #FD762D; --ks-turk: #C2560F; --ks-gri: #5D666F; --ks-cizgi: #ECEFF4; container-type: inline-size; margin: 0 0 24px; }
.ok-sayac * { box-sizing: border-box; }
.ok-sayac .ks-kutu { padding: 22px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ks-cizgi); box-shadow: 0 10px 30px rgba(28, 37, 57, .05); }
.ok-sayac h2.ks-kutu__baslik { margin: 0 0 14px; color: var(--ks-lac); font-family: var(--font-heading--family); font-size: 19px; font-weight: 600; line-height: 1.3; }
.ok-sayac .ks-sayac { background: linear-gradient(180deg, #FFF7F2 0%, #fff 60%); border-color: #FBE3D4; }
.ok-sayac h2.ks-sayac__baslik { display: flex; align-items: center; gap: 10px; }
.ok-sayac .ks-sayac__isaret { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ks-tur); }
.ok-sayac .ks-sayac__isaret::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ks-tur); opacity: 0; animation: okNabiz 2s ease-out infinite; }
@keyframes okNabiz { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.ok-sayac .ks-sayac__liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ok-sayac .ks-sayac__liste li { margin: 0; list-style: none; }
.ok-sayac .ks-sinav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--ks-cizgi); color: var(--ks-lac); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ok-sayac .ks-sinav:hover { color: var(--ks-lac); border-color: #F6C3A3; box-shadow: 0 10px 24px rgba(253, 118, 45, .12); transform: translateY(-1px); }
.ok-sayac .ks-sinav:focus-visible { outline: 2px solid var(--ks-turk); outline-offset: 2px; }
.ok-sayac .ks-sinav--ilk { background: var(--ks-lac); border-color: var(--ks-lac); color: #fff; }
.ok-sayac .ks-sinav--ilk:hover { color: #fff; border-color: var(--ks-lac); box-shadow: 0 14px 30px rgba(28, 37, 57, .25); }
.ok-sayac .ks-sinav__govde { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ok-sayac .ks-sinav__isim { font-family: var(--font-heading--family); font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ok-sayac .ks-sinav__tarih { color: #6B7480; font-size: 12px; line-height: 1.3; }
.ok-sayac .ks-sinav--ilk .ks-sinav__tarih { color: rgba(255, 255, 255, .7); }
.ok-sayac .ks-sinav__sayi { display: flex; align-items: stretch; gap: 4px; flex: none; }
.ok-sayac .ks-sinav__kutu { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 6px 4px 5px; border-radius: 10px; background: #FFF1E8; color: var(--ks-tur); line-height: 1; }
.ok-sayac .ks-sinav__kutu b { font-family: var(--font-heading--family); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ok-sayac .ks-sinav__kutu small { margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #B04B0A; }
.ok-sayac .ks-sinav__kutu--kucuk { min-width: 36px; background: #F3F5F8; color: var(--ks-lac); }
.ok-sayac .ks-sinav__kutu--kucuk b { font-size: 15px; }
.ok-sayac .ks-sinav__kutu--kucuk small { color: #6B7480; }
.ok-sayac .ks-sinav--ilk .ks-sinav__kutu { background: var(--ks-tur); color: #fff; }
.ok-sayac .ks-sinav--ilk .ks-sinav__kutu small { color: rgba(255, 255, 255, .85); }
.ok-sayac .ks-sinav--ilk .ks-sinav__kutu--kucuk { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 380px) { .ok-sayac .ks-sinav__kutu--kucuk { display: none; } }
@media (prefers-reduced-motion: reduce) { .ok-sayac .ks-sayac__isaret::after { animation: none; } .ks-sinav:hover { transform: none; } }
/* Dar sütunda (masaüstünde sol sütun ~300 px) sayı kutuları adın altına geçer; geniş yerde blogdaki gibi yanda */
@container (max-width: 420px) {
  .ok-sayac .ks-sinav { flex-wrap: wrap; align-items: stretch; }
  .ok-sayac .ks-sinav__govde { flex: 1 1 100%; }
  .ok-sayac .ks-sinav__sayi { flex: 1 1 100%; }
  .ok-sayac .ks-sinav__kutu { flex: 1.3 1 0; }
  .ok-sayac .ks-sinav__kutu--kucuk { flex: 1 1 0; display: flex; }
}
@media (max-width: 991px) {
  .ok-sol { display: flex; flex-direction: column; }
  .ok-sol > .ok-sayac { order: 99; margin: 8px 0 0; }
}