/* jekcms — Evrensel Hero Slider (includes/sections/hero--slider.php).
 * Kare köşeler (border-radius yok). output_head_scripts yükler. */
/* GENISLIK: slider, temanin BASLIK (logo+menu) kapsayicisiyla AYNI genislikte
   ve ORTALANMIS olmali — full-bleed DEGIL. Tema kapsayici degiskenleri
   kullanilir (.container-wide ile ayni formul): personal --wide:1320px,
   trends 1280, tech 1100, minimalist 800; tanimsiz temalarda 1200px'e duser.
   NEDEN acik yazmak sart: `aspect-ratio` + `max-height` varken genislik `auto`
   kalirsa tarayici genisligi YUKSEKLIKTEN turetiyor (560*21/9 = 1306.67px) →
   slider sola yapisik, rastgele genislikte cikiyor ve noktalar kayiyordu. */
/* CERCEVE: slider, altindaki kartlarla ayni dile sahip olmali — yuvarlak kose
   + govde golgesi. Sabit deger YAZILMAZ, temanin KENDI token'lari kullanilir:
   personal 24px/0 12px 36px rgba(46,42,95,.08), pets 16px, crypto 12px...
   Token tanimlamayan temada 0/none'a duser, yani o temanin kare tasarimi
   BOZULMAZ. overflow:hidden zaten var → slaytlar koseye kirpilir. */
.jek-hero-slider { position: relative; width: min(var(--wide, var(--container, 1200px)), calc(100% - 40px)); margin-inline: auto; overflow: hidden; aspect-ratio: 21 / 9; max-height: 560px; background: #0f172a; border-radius: var(--radius-lg, 0); box-shadow: var(--shadow-sm, none); }
.jek-slides, .jek-slide { position: absolute; inset: 0; }
.jek-slide { background-size: cover; background-position: center; opacity: 0; transition: opacity .6s ease; }
.jek-slide.is-active { opacity: 1; }
.jek-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.78)); }
.jek-slide-link { position: absolute; inset: 0; display: flex; align-items: flex-end; text-decoration: none; }
.jek-slide-body { position: relative; z-index: 1; padding: 32px 40px; color: #fff; max-width: 760px; }
.jek-slide-cat { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.2); padding: 4px 10px; margin-bottom: 10px; }
.jek-slide-title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: 0 0 8px; color: #fff; }
.jek-slide-meta { font-size: 13px; opacity: .85; }
.jek-slide-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,.4); color: #fff; border: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jek-slide-arrow:hover { background: rgba(0,0,0,.65); }
.jek-slide-prev { left: 12px; }
.jek-slide-next { right: 12px; }
.jek-slide-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.jek-slide-dot { width: 10px; height: 10px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; }
.jek-slide-dot.is-active { background: #fff; }

/* Mobil: 21/9 oran dar ekranda ~167px yukseklik veriyor, oysa slayt icerigi
   (kategori rozeti + 3 satir baslik + tarih) ~224px yer istiyor → baslik
   tepeden KESILIYOR ve rozet hic gorunmuyordu. Dar ekranda oran yukseltilip
   taban yukseklik veriliyor, ic bosluk da ekrana uygun hale getiriliyor. */
@media (max-width: 640px) {
  .jek-hero-slider { aspect-ratio: 4 / 3; min-height: 320px; max-height: none; }
  .jek-slide-body  { padding: 20px 20px 26px; }
  .jek-slide-title { font-size: 1.35rem; }
  .jek-slide-cat   { margin-bottom: 8px; }
  .jek-slide-dots  { bottom: 10px; }
}