/* ============================================================
   Siliconmade Academy — Hero Showcase (Silindirik Eğitim Karuseli)
   Yalnızca deneme.html tarafından yüklenir. style.css/responsive.css/
   animations.css'e HİÇBİR şekilde dokunmaz — tamamen yeni isim alanı
   (hero-showcase / hs-*). Mobile-first, min-width breakpoint'ler:
   600 / 768 / 1024 / 1440.
   ============================================================ */

/* ---------- 1. Yeni tema token'ları (yalnızca bu dosyada) ---------- */
[data-theme="light"] {
  --hero-surface: #F7F5F2;
  --hero-surface-edge: #EFEBE5;
  --hero-ink: #1A1F38;
  --hero-ink-soft: #4A5068;
  --hero-ghost: rgba(26, 31, 56, .10);
  --hero-card-shadow: 0 18px 44px rgba(26, 31, 56, .18);
  --hero-card-shadow-side: 0 10px 24px rgba(26, 31, 56, .10);
  --hero-scrim: linear-gradient(180deg, rgba(10, 22, 40, 0) 42%, rgba(10, 22, 40, .82) 100%);
}
[data-theme="dark"] {
  --hero-surface: #1A1F38;
  --hero-surface-edge: #151A30;
  --hero-ink: #FFFFFF;
  --hero-ink-soft: #B8BDD4;
  --hero-ghost: rgba(255, 255, 255, .07);
  --hero-card-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --hero-card-shadow-side: 0 10px 24px rgba(0, 0, 0, .35);
  --hero-scrim: linear-gradient(180deg, rgba(10, 22, 40, 0) 42%, rgba(10, 22, 40, .82) 100%);
}

/* ---------- 2. Bölüm iskeleti ----------
   Bölüm artık sayfanın ilk ekranı değil (üstünde video hero banner var):
   sabit navbar'a yer açan büyük üst boşluğa gerek kalmadı, normal bölüm
   boşluğu kullanılıyor. */
.hero-showcase {
  position: relative;
  background: var(--hero-surface);
  border-bottom: 1px solid var(--hero-surface-edge);
  padding: 40px 0 32px;
  margin: 0;
  overflow: hidden;
  z-index: 2;
}

.hero-showcase .hs-intro {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
  text-align: center;
}

.hero-showcase .hs-title {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--hero-ink);
  margin: 0 0 14px;
  font-size: clamp(30px, 8.5vw, 40px);
}

/* Daktilo yuvası: hayalet metin normal akışta yer kaplar (görünmez),
   canlı metin onun üzerine mutlak konumlanır. Böylece harf harf yazarken
   satır sayısı değişse bile kutu büyüklüğü sabit → CLS = 0.
   min-height gibi kırılgan bir tahmine gerek kalmıyor; her breakpoint'te
   ayırdığı yer metnin gerçek yüksekliği. */
.hero-showcase .hs-title-slot {
  position: relative;
  display: block;
}
.hero-showcase .hs-title-ghost {
  visibility: hidden;
}
.hero-showcase .hs-title-live {
  position: absolute;
  inset: 0;
}
/* JS yoksa: hayalet gerçek metne dönüşür, canlı katman kalkar */
html:not(.js) .hero-showcase .hs-title-ghost { visibility: visible; }
html:not(.js) .hero-showcase .hs-title-live { display: none; }

/* Vurgulu kelime — düz kırmızı (marka rengi). "Yapay Zeka" kısmı
   --hero-ink'ten geliyor: açık temada lacivert (#1A1F38), koyu temada
   beyaz (koyu zeminde lacivert okunmazdı). */
.hero-showcase .hs-accent {
  color: var(--accent);
}

.hero-showcase .hs-caret {
  display: inline-block;
  width: .055em;
  height: .82em;
  margin-left: .06em;
  vertical-align: baseline;
  background: var(--accent);
  border-radius: 1px;
  animation: hsCaretBlink 1s step-end infinite;
}
@keyframes hsCaretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------- 2b. #courses'a özel başlık/alt yazı stili (2026-08-10) ----------
   Yalnızca id="courses" ile eşleşir — .hero-showcase'in paylaşılan .hs-title/
   .hs-lead tabanını (kurumsal-egitimler/index.html dahil diğer sayfalarda)
   değiştirmez. "Eğitimlerimiz" düz/tek renkti (kullanıcı: "özensiz"); artık
   marka rengine kayan bir degrade taşıyor, alt yazı da kendi tipografisini
   ve okla vurgulanan bir CTA hissini alıyor. */
#courses .hs-title {
  background: linear-gradient(120deg, var(--hero-ink) 15%, var(--accent) 55%, var(--hero-ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#courses .hs-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 2.4vw, 19px);
  letter-spacing: .01em;
  color: var(--hero-ink-soft);
}

/* ---------- 3. Sahne (stage) — geometri değişkenleri ---------- */
.hero-showcase .hs-stage {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;

  /* MOBİL KART BOYU — halka görünürlüğünü belirleyen tek değer.
     Yan kartın merkezi kart genişliğinin ~1.007 katı kadar yana kayar
     (x = radius*sin(360/N), radius = 1.566*w). 72vw'de bu ~72vw ediyordu:
     yan kartın yalnızca ince bir ucu ekranda kalıyor, o da prev/next
     butonlarının altında kaybolup "sadece öndeki kart var" görüntüsü
     veriyordu. 56vw'de yan kartın yaklaşık yarısı ekranda kalır →
     silindir/halka hissi mobilde de görünür. */
  --hs-card-w: min(56vw, 230px);
  --hs-step: calc(var(--hs-card-w) * .88);
  /* Halka geometrisi — JS bunları slayt sayısına göre yeniden yazar
     (--hs-ang = 360/N, --hs-radius = (kiriş/2)/tan(pi/N)).
     Buradaki değerler N=9 varsayımıyla JS öncesi/JS'siz durum içindir. */
  --hs-ang: 40deg;
  --hs-radius: calc(var(--hs-card-w) * 1.566);
  --hs-fade: .30;
  perspective: 900px;
  /* ARKAYA YATMA (coverflow): kart kendi yatay ekseninde geriye devrilir —
     üst kenarı izleyiciden uzaklaşır, perspektifle daralır. 2B rotate DEĞİL
     (o kartı "yan" gösteriyordu); bu gerçek 3B eğim, .hs-slide'da uygulanır.
     --hs-lean-x: her karttaki taban eğim.
     --hs-lean-side: merkezden uzaklaştıkça (|--hs-o|) eklenen ek eğim →
     yan kartlar arkaya daha çok gömülür, merkez kart neredeyse dik durur. */
  --hs-lean-x: 7deg;
  --hs-lean-side: 2.5deg;
  /* Yan kartların perspektife ek olarak küçülmesi (coverflow derinlik hissi) */
  --hs-shrink: .05;
  /* Kartlar 1:1; arkaya yatık duruşta yakın kenar perspektifle biraz büyüdüğü
     için genişliğin ~1.02 katı + nefes payı. Sahne overflow:hidden olduğundan
     bu pay olmadan alt kenar kırpılır. */
  height: calc(var(--hs-card-w) * 1.02 + 24px);
}

.hero-showcase .hs-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Halka fare/parmakla sürüklenebilir */
  cursor: grab;
  /* Halkanın tamamı yarıçap kadar geriye itilir → öndeki kart z=0'a oturur,
     yoksa perspektif onu aşırı büyütürdü. */
  transform: translateZ(calc(var(--hs-radius) * -1));
}

.hero-showcase .hs-slide {
  --hs-o: 0;
  --hs-abs: max(var(--hs-o), calc(var(--hs-o) * -1));
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--hs-card-w);
  height: auto;
  aspect-ratio: 1 / 1;
  list-style: none;
  /* GERÇEK SİLİNDİR: kart, eksenden --hs-radius uzaklıkta, --hs-o * --hs-ang
     açısında halkaya oturur ve dışa bakar. Düz kayan şerit değil.
     rotateY önce yerel ekseni döndürür, translateZ o eksende dışarı taşır. */
  /* Sıra önemli: rotateY halkadaki açıyı verir, translateZ kartı o eksende
     dışarı taşır, rotateX ise EN SONDA gelir — böylece kart, halkadaki yerine
     oturduktan sonra kendi yatay ekseninde arkaya devrilir. rotateX önce
     gelseydi eğim halka ekseniyle karışır, kartlar yamulurdu. */
  transform:
    rotateY(calc(var(--hs-o) * var(--hs-ang)))
    translateZ(var(--hs-radius))
    rotateX(calc(var(--hs-lean-x) + var(--hs-abs) * var(--hs-lean-side)))
    scale(calc(1 - var(--hs-abs) * var(--hs-shrink)));
  /* preserve-3d: ::before hayaleti kendi 3B dönüşümünü alabilsin diye.
     backface-visibility BURADA DEĞİL .hs-card'da — burada olsaydı kart
     arkaya dönerken hayalet yansıması da birlikte yok olurdu. */
  transform-style: preserve-3d;
  /* Opaklıkla soldurma YOK: kart, arkaya dönene kadar tam görünür kalır.
     Eskiden --hs-fade kartları daha yana gelmeden silikleştirdiği için
     "ekrandan kayboluyor" hissi veriyordu. */
  opacity: 1;
  z-index: calc(100 - var(--hs-abs) * 10);
}
.hero-showcase .hs-slide.is-far { pointer-events: none; }

/* JS ilk boyamadan önce/başarısız olursa: kartlar üst üste yığılmasın */
html.js .hero-showcase .hs-slide:nth-child(1) { --hs-o: 0; }
html.js .hero-showcase .hs-slide:nth-child(2) { --hs-o: 1; }
html.js .hero-showcase .hs-slide:nth-child(3) { --hs-o: -1; }
html.js .hero-showcase .hs-slide:nth-child(n+4) { --hs-o: 2; }

/* Sürükleme: kart bir <a>, görsel de <img> — ikisi de tarayıcının yerleşik
   "sürükle bırak" davranışını tetikler; bu tetiklendiği anda tarayıcı
   pointercancel atıp pointermove'ları keser, yani FAREYLE sürükleme
   çalışmaz. -webkit-user-drag + JS'teki dragstart preventDefault ikisi
   birlikte bunu kapatır. */
.hero-showcase .hs-card,
.hero-showcase .hs-card-img {
  -webkit-user-drag: none;
  user-drag: none;
}
.hero-showcase .hs-card { cursor: grab; }
.hero-showcase .hs-stage.is-dragging,
.hero-showcase .hs-stage.is-dragging .hs-track,
.hero-showcase .hs-stage.is-dragging .hs-card { cursor: grabbing; }

.hero-showcase .hs-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--hero-ghost);
  box-shadow: none;
  outline: none;
  /* Karta ASLA dönüşüm verme. 3B (rotateX/rotateY) buradaki clip-path ile
     çakışıp scrim/başlığı komşu karta taşırıyor (dosyanın başında not edilen
     doğrulanmış render hatası). 2B rotate de denendi: kartı kendi düzleminde
     çevirdiği için "arkaya yatık" değil "yan yatmış" görünüyordu. Arkaya
     yatma dahil tüm 3B iş .hs-slide'daki transform zincirinde. */
  /* Arkaya dönen kartın aynalanmış yüzü görünmesin (yazı ters okunurdu).
     Hayalet ::before .hs-slide'da olduğu için bundan etkilenmez. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-showcase .hs-slide:not(.is-far) .hs-card { box-shadow: var(--hero-card-shadow-side); }
.hero-showcase .hs-slide.is-center .hs-card { box-shadow: var(--hero-card-shadow); }

/* Kavis (barrel): 3D transform .hs-slide'da, clip-path .hs-card'da —
   aynı elemanda çakışmadıkları için preserve-3d bozulmuyor.
   clip-path box-shadow'u kırptığı için gölge drop-shadow'a devrediliyor
   (drop-shadow kırpılmış şekli takip eder). Pahalı olduğundan yalnızca
   merkeze yakın kartlarda açık. */
@supports (clip-path: url(#hs-barrel)) {
  .hero-showcase .hs-card {
    clip-path: url(#hs-barrel);
    border-radius: 0;
    box-shadow: none;
  }
  .hero-showcase .hs-slide:not(.is-far) .hs-card,
  .hero-showcase .hs-slide.is-center .hs-card { box-shadow: none; }
  /* Gölge .hs-card'da (.hs-slide'da DEĞİL) — slide'a verilince ::before
     hayalet dikdörtgeni de gölgeye dahil olup kartın etrafında köşeli
     bir çerçeve oluşturuyordu. */
  .hero-showcase .hs-slide:not(.is-far) .hs-card {
    filter: drop-shadow(0 14px 30px rgba(10, 16, 34, .38));
  }
  .hero-showcase .hs-slide.is-center .hs-card {
    filter: drop-shadow(0 20px 44px rgba(10, 16, 34, .50));
  }
}

/* SVG tanım kabı akışta yer kaplamasın */
.hero-showcase .hs-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* NOT: Burada eskiden ".hs-slide::before" ile yarım adım kaydırılmış düz renkli
   bir "hayalet halka" vardı. Çemberin boşalmasını engellemek içindi; ama halka
   zaten 9 gerçek slota klonlandığı için boşluklar gerçek kart görselleriyle
   doluyor. Düz renk eşler bu yüzden sadece kartların arkasında gri dilimler
   olarak görünüyordu (özellikle açık temada) — kaldırıldı. */

.hero-showcase .hs-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
}

.hero-showcase .hs-card-scrim {
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  pointer-events: none;
}

.hero-showcase .hs-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Yüzde padding kart genişliğine göre çözülür — kavis kenarları içeri
     çektiği için metin şeklin dışında kalmasın diye orantılı veriliyor. */
  padding: 0 9% 8%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
}
.hero-showcase .hs-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-showcase .hs-card-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: rgba(255, 255, 255, .78);
}

/* Odak halkası: clip-path kartı kesebileceği için outline kart sarmalayıcısına taşınır */
.hero-showcase .hs-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@supports selector(:has(a)) {
  .hero-showcase .hs-card:focus-visible { outline: none; }
  .hero-showcase .hs-slide:has(.hs-card:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent);
    border-radius: 24px;
  }
}

/* ---------- 4. Kontroller ----------
   Dots + play/pause kaldırıldı (kullanıcı isteği); geriye yalnızca
   prev/next okları kaldı. Bunlar .hs-stage'in İÇİNDE kalmak zorunda
   (position:absolute referansı .hs-stage olmalı, dışarı taşınırsa kırılır). */
.hero-showcase .hs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  left: 4px;
}
.hero-showcase .hs-nav--next { left: auto; right: 4px; }

.hero-showcase .hs-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hero-ghost);
  background: var(--hero-surface);
  color: var(--hero-ink);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hero-showcase .hs-nav svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.hero-showcase .hs-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Mobilde oklar küçülür ve yarı saydam olur: tam kenarda duran yan kartın
   görünen şeridini kapatmasınlar (44px'lik opak daire, 60px'lik şeridin
   neredeyse tamamını örtüyordu). */
@media (max-width: 599px) {
  .hero-showcase .hs-nav {
    width: 34px;
    height: 34px;
    background: color-mix(in srgb, var(--hero-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .hero-showcase .hs-nav svg { width: 15px; height: 15px; }
  .hero-showcase .hs-nav--prev { left: 2px; }
  .hero-showcase .hs-nav--next { right: 2px; }
}

.hero-showcase .hs-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-showcase .hs-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 5. will-change politikası ---------- */
.hero-showcase .hs-track.is-animating .hs-slide {
  will-change: transform, opacity;
}

/* ---------- 6. JS'siz durum: yatay kaydırılabilir şerit ---------- */
html:not(.js) .hero-showcase .hs-stage { height: auto; overflow: visible; }
html:not(.js) .hero-showcase .hs-track {
  position: static;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 4px 4px 12px;
  transform-style: flat;
  -webkit-overflow-scrolling: touch;
}
html:not(.js) .hero-showcase .hs-slide {
  position: static;
  flex: 0 0 auto;
  width: var(--hs-card-w);
  transform: none;
  opacity: 1;
  scroll-snap-align: center;
}
/* JS yokken karusel yok: oklar da işlevsiz kalacağı için gizleniyor. */
html:not(.js) .hero-showcase .hs-nav,
html:not(.js) .hero-showcase .hs-live { display: none; }

@media (min-width: 768px) {
  html:not(.js) .hero-showcase .hs-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow-x: visible;
    gap: 20px;
  }
  html:not(.js) .hero-showcase .hs-slide { width: auto; }
}

/* ---------- 7. Hareket azaltma / Save-Data: statik .hs-lite modu ---------- */
.hero-showcase .hs-stage.hs-lite { height: auto; overflow: visible; }
.hero-showcase .hs-stage.hs-lite .hs-track {
  position: static;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 4px 4px 12px;
  transform-style: flat;
  -webkit-overflow-scrolling: touch;
}
.hero-showcase .hs-stage.hs-lite .hs-slide {
  position: static;
  flex: 0 0 auto;
  width: var(--hs-card-w);
  transform: none !important;
  opacity: 1;
  scroll-snap-align: center;
}
.hero-showcase .hs-stage.hs-lite .hs-nav,
.hero-showcase .hs-stage.hs-lite .hs-live { display: none; }

@media (min-width: 768px) {
  .hero-showcase .hs-stage.hs-lite .hs-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow-x: visible;
    gap: 20px;
  }
  .hero-showcase .hs-stage.hs-lite .hs-slide { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  /* Daktilo/imleç/alt başlık animasyonu yok — metin anında ve tam görünür.
     (JS tarafı da reduced-motion'da yazmayı hiç başlatmıyor.) */
  .hero-showcase .hs-title-ghost { visibility: visible; }
  .hero-showcase .hs-title-live { display: none; }
  .hero-showcase .hs-caret { display: none; }

  .hero-showcase .hs-stage { height: auto; overflow: visible; }
  .hero-showcase .hs-track {
    position: static;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 4px 12px;
    transform-style: flat;
  }
  .hero-showcase .hs-slide {
    position: static;
    flex: 0 0 auto;
    width: var(--hs-card-w);
    transform: none !important;
    opacity: 1;
    scroll-snap-align: center;
  }
  .hero-showcase .hs-nav,
  .hero-showcase .hs-live { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .hero-showcase .hs-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    overflow-x: visible;
    gap: 20px;
  }
  .hero-showcase .hs-slide { width: auto; }
}

/* ================================================================
   BREAKPOINT ZENGİNLEŞTİRME (mobile-first, min-width)
   ================================================================ */

/* ---------- ≥600px: derinlik artar ---------- */
/* NOT: Spec'te burada SVG "barrel" clip-path (§4.3) tanımlıydı, ancak
   gerçek Chrome render testinde clip-path + 3D transform (rotateY/
   preserve-3d) kombinasyonu kart sarmalayıcısını doğru kırpmıyor —
   scrim/başlık komşu karta taşıyordu (doğrulanmış render hatası).
   clip-path + preserve-3d kombinasyonu güvenilmez olduğu için TÜM
   breakpoint'lerde sade overflow:hidden + border-radius (24px)
   kullanılıyor; "fıçı bombeliği" illüzyonu kaldırıldı. Doğruluk,
   estetik zenginleştirmeden önce gelir (CLAUDE.md önceliği). */
@media (min-width: 600px) {
  .hero-showcase .hs-stage {
    --hs-card-w: min(53vw, 390px);
    --hs-step: calc(var(--hs-card-w) * .88);
    --hs-fade: .30;
    perspective: 1100px;
  }
}

/* ---------- ≥768px: hayalet sıra + yan konumlu nav butonları ---------- */
@media (min-width: 768px) {
  .hero-showcase.hero-showcase { padding-top: 56px; }
  .hero-showcase .hs-title { font-size: clamp(40px, 5.5vw, 48px); }
  .hero-showcase .hs-stage {
    --hs-card-w: min(44vw, 440px);
    --hs-step: calc(var(--hs-card-w) * .88);
    --hs-fade: .30;
    perspective: 1300px;
    margin-top: 40px;
  }
  .hero-showcase .hs-card-title { font-size: 17px; }
  .hero-showcase .hs-card-meta { font-size: 13px; }

  .hero-showcase .hs-nav--prev { left: 8px; }
  .hero-showcase .hs-nav--next { right: 8px; }
}

/* ---------- ≥1024px: büyük sahne, geniş rotasyon ---------- */
@media (min-width: 1024px) {
  .hero-showcase.hero-showcase { padding-top: 64px; padding-bottom: 48px; }
  .hero-showcase .hs-intro { padding: 0 24px; }
  .hero-showcase .hs-title { font-size: clamp(52px, 5vw, 60px); }
  .hero-showcase .hs-stage {
    --hs-card-w: min(34vw, 460px);
    --hs-step: calc(var(--hs-card-w) * .88);
    --hs-fade: .30;
    perspective: 1500px;
    margin-top: 40px;
  }
  .hero-showcase .hs-nav--prev { left: 24px; }
  .hero-showcase .hs-nav--next { right: 24px; }
}

/* ---------- ≥1440px: maksimum sahne, sabit başlık boyu ---------- */
@media (min-width: 1440px) {
  .hero-showcase .hs-title { font-size: 64px; }
  .hero-showcase .hs-stage {
    --hs-card-w: min(34vw, 495px);
    --hs-step: calc(var(--hs-card-w) * .88);
    --hs-fade: .30;
    perspective: 1700px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ================================================================
   .hs-features — hero altındaki yatay bilgi şeridi
   ================================================================ */
.hero-showcase .hs-features {
  list-style: none;
  margin: 28px auto 0;
  padding: 0 clamp(16px, 4vw, 24px);
  max-width: var(--container-max, 1200px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
}

.hero-showcase .hs-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 2 sütun @360px; tek satıra sığdığında flex-wrap zaten açar */
  flex: 0 1 calc(50% - 22px);
  min-height: 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--hero-ink-soft);
  white-space: nowrap;
}

.hero-showcase .hs-feature svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

@media (min-width: 600px) {
  .hero-showcase .hs-features { margin-top: 36px; gap: 16px 40px; }
  .hero-showcase .hs-feature { flex: 0 0 auto; font-size: 15px; }
}
@media (min-width: 1024px) {
  .hero-showcase .hs-features { margin-top: 44px; gap: 16px 56px; }
  .hero-showcase .hs-feature { font-size: 16px; }
  .hero-showcase .hs-feature svg { width: 22px; height: 22px; }
}

/* NOT: buradaki "#apply-form / .apply-panel" kuralları kaldırıldı. Başvuru formu
   artık index.html'deki gibi hero banner'ın içinde (sağ kolon) duruyor; kart
   görünümü style.css'teki paylaşılan .hero-form-card kuralından geliyor. */