/* /ara tanıtım turu */
#araIntroOverlay {
  position: fixed; inset: 0; z-index: 99000;
  background: rgba(15,31,61,.6);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
#araIntroOverlay.acik { opacity: 1; visibility: visible; }

/* Vurgu kutusu — seçili bölümü saran çerçeve (delik efekti) */
#araIntroKutu {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 3px #2563eb, 0 0 0 99999px rgba(15,31,61,.6);
  background: transparent;
  z-index: 99001;
  pointer-events: none;
  transition: all .25s;
}
/* Vurgulanan bölüm elemanlarını karartmanın üstüne çıkar (okunsun) */
.ara-intro-yukselt {
  position: relative !important;
  z-index: 99001 !important;
  background: #fff;
  border-radius: 8px;
}

#araIntroPop {
  position: fixed; width: 290px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15,31,61,.4);
  padding: 16px 18px; z-index: 99002;
  transition: left .3s, top .3s;
}
#araIntroBaslik { font-size: 15px; font-weight: 800; color: #0f1f3d; margin-bottom: 6px; }
#araIntroMetin { font-size: 13px; color: #475569; font-weight: 600; line-height: 1.55; margin-bottom: 14px; }
#araIntroAlt { display: flex; align-items: center; justify-content: space-between; }
#araIntroSayac { font-size: 12px; font-weight: 700; color: #94a3b8; }
#araIntroAtla {
  background: none; border: none; color: #94a3b8;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  margin-right: 8px; font-family: 'Nunito', sans-serif;
}
#araIntroAtla:hover { color: #64748b; }
#araIntroIleri {
  background: #2563eb; color: #fff; border: none;
  padding: 7px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 800; cursor: pointer;
  font-family: 'Nunito', sans-serif; transition: background .13s;
}
#araIntroIleri:hover { background: #1d4ed8; }